autocomplete text field type with placeholder

[DawPi]

Hi,

as you know text helper has placeholder option to be set. It works great. However it doesn't when you set this field as a autcomplete. How can I restore that to work with automplete field type?

 

Thanks in advance,

DawPi

[Stuart Silvester]

The placeholder applies to the plain text field (and it's applied to the textarea) that's hidden by the autocomplete Javascript.

However, the value displayed in the autocomplete itself is not customisable at this time (it's set in a JS template).

[DawPi]

Hm, any way to apply it?

[Nathan Explosion]

@DawPi - are you still looking for a way to do this?

 

 

[DawPi]

Always.... 😉

[Nathan Explosion]

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.

[DawPi]

Thanks, saved for a future projects.

 

P.s. such thing should be in the core I think.