javascript - jquery autocomplete transformResult auto focus property not working - Stack Overflow

Now it is looking like this

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

jQuery('#citySearch').autoplete({
        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 autoplete i want to set autoFocus as true but it is not working. please help.

It should like 2nd image

Now it is looking like this

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

jQuery('#citySearch').autoplete({
        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 autoplete i want to set autoFocus as true but it is not working. please help.

It should like 2nd image

• javascript
• jquery-plugins
• jquery-autoplete

Share Follow edited Aug 26, 2015 at 9:04 Kamini asked Aug 26, 2015 at 7:31 KaminiKamini 69022 gold badges1414 silver badges3636 bronze badges 4

• jQuery('#citySearch').autoplete({ autoFocus: true, // rest of param..... – Juned Lanja Commented Aug 26, 2015 at 7:47
• Please provide fiddle or plunkr for better answer – Juned Lanja Commented Aug 26, 2015 at 7:48
• @Jugnu please have look at the updated question i have added images for this. – Kamini Commented Aug 26, 2015 at 9:04
• @Jugnu found the answer – Kamini Commented Aug 27, 2015 at 13:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I have found the solution with reference to these https://www.devbridge./sourcery/ponents/jquery-autoplete/

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').autoplete({
        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
                    };

                })
            };
        }
    });

autofocus will highlight first item, while selectFirst will select first item.

 jQuery('#citySearch').autoplete({
            selectFirst: true,
            autoFocus: 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
                        };

                    })
                };
            }
        });

u have to add

$( "#citySearch" ).focus();

https://fiddle.jshell/1vfcgcco/1/

or something like this...

$("#auto").autoplete({ 
source: function(request, response) {
    var results = $.ui.autoplete.filter(src, request.term);

    response(results.slice(0, 4));
 }
});

http://jsfiddle/vqwBP/1098/