This is how I am doing it, adding the same placeholder to multiple text autocomplete fields on one page
Put a data-controller in place, and add the name(s) of the field(s) to a data-fields attribute on that controller
<div data-controller="your.data.controller" data-fields="field_1,field_2,field_3"></div>
Add a language string to jslang.php
'your_language_string'=>'Your placeholder'
Little bit of javascript...
;
(function ($, _, undefined) {
"use strict";
let fields;
ips.controller.register('your.data.controller', {
initialize: function () {
fields = this.scope.data('fields');
if (fields !== '') {
$(document).ready(function () {
let fieldsArray = fields.split(',');
for (var i = 0; i < fieldsArray.length; i++) {
$('#' + fieldsArray[i]).find('input[aria-autocomplete="list"]').each(function () {
$(this).attr('placeholder', ips.getString('your_language_string'));
$(this).css('width', '200px');
});
}
$(document).on('tokenDeleted', function (event, data) {
for (var i = 0; i < fieldsArray.length; i++) {
$('#' + fieldsArray[i]).find('input[aria-autocomplete="list"]').each(function () {
$(this).css('width', '200px');
});
}
});
});
}
}
});
}
(jQuery, _)
The css modifications there are purely to extend the placeholder out to make it visible fully (the area in the field is 20px in width by default, which is too small to display much text)
You could refine it to just do one field, or do multiple fields with different placeholders.
Hope that makes sense.