javascriptjquery-pluginsjquery-autocomplete

jquery autocomplete transformResult auto focus property not working

Now it is looking like this enter image description here

I am workingin jquery autocomplete below is my code where i want to search city.

jQuery('#citySearch').autocomplete({
        serviceUrl: basePath + '/selectMycities.json',
        paramName: "tagName", // 
        onSelect: function(suggestion) {
            cityID = suggestion.data;
            cityId=cityID;
            jQuery("#cityId").val(cityID);
            return false;
        },
        transformResult: function(response) {

            return {

                suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
                    return {
                        value: item.cityName,
                        data: item.cityId,
                        id: item.cityId
                    };

                })
            };
        }
    });

Now in above autocomplete i want to set autoFocus as true but it is not working. please help.

It should like 2nd image

enter image description here

Solution

  • I have found the solution with reference to these https://www.devbridge.com/sourcery/components/jquery-autocomplete/

    I used autoSelectFirst property and i got the respected result as like 2nd image.

    autoSelectFirst: if set to true, first item will be selected when showing suggestions. Default value false.

    jQuery('#citySearch').autocomplete({
        autoSelectFirst: true,
        serviceUrl: basePath + '/selectMycities.json',
        paramName: "tagName", // 
        onSelect: function(suggestion) {
            cityID = suggestion.data;
            cityId=cityID;
            jQuery("#cityId").val(cityID);
            return false;
        },
        transformResult: function(response) {

            return {

                suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
                    return {
                        value: item.cityName,
                        data: item.cityId,
                        id: item.cityId
                    };

                })
            };
        }
    });