Jump to content

autocomplete text field type with placeholder


DawPi

Recommended Posts

  • 1 year later...

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.

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...