jQuery自动完成transformResult自动焦点属性不起作用答案

【问题标题】：jquery autocomplete transformResult auto focus property not workingjQuery自动完成transformResult自动焦点属性不起作用
【发布时间】：2015-08-26 07:31:04
【问题描述】：

现在看起来像这样

我正在使用 jquery 自动完成下面是我想要搜索城市的代码。

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
                    };

                })
            };
        }
    });

现在在上面的自动完成中，我想将 autoFocus 设置为 true，但它不起作用。请帮忙。

它应该像第二张图片

【问题讨论】：

jQuery('#citySearch').autocomplete({ autoFocus: true, // 其余参数.....
请提供 fiddle 或 plunkr 以获得更好的答案
@Jugnu 请查看更新后的问题，我为此添加了图片。
@Jugnu 找到了答案

标签： javascript jquery-plugins jquery-autocomplete

【解决方案1】：

参考这些https://www.devbridge.com/sourcery/components/jquery-autocomplete/找到了解决方案

我使用了 autoSelectFirst 属性，我得到了像第二张图片一样的结果。

autoSelectFirst：如果设置为 true，则显示建议时将选择第一个项目。默认值为 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
                    };

                })
            };
        }
    });

【讨论】：

您使用的是默认 jquery 自动完成以外的其他自动完成功能，这就是它无法正常工作的原因？？？

【解决方案2】：

自动对焦将突出显示第一项，而 selectFirst 将选择第一项。

 jQuery('#citySearch').autocomplete({
            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
                        };

                    })
                };
            }
        });

【讨论】：

感谢您的回复，但正如我所说，这些属性最终无法正常工作。我认为对于 jquery 自动完成的 transformResult 类型，相同的函数有不同的属性。
请提供小提琴，以便我了解您的情况。希望你知道如何制作小提琴????

【解决方案3】：

你必须添加

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

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

或者类似的...

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

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

http://jsfiddle.net/vqwBP/1098/

【讨论】：

它对我不起作用。请使用上传的图片查看更新的问题
两张图一模一样，你在找这个吗-> jsfiddle.net/vqwBP/1098
它们不一样第二张图片在搜索中突出显示第一个元素。并且你给出的jsfiddle中的jquery自动完成与我使用的jquery自动完成不同。
请添加一个小提琴，这样我们就可以使用你的小提琴，是的，我使用了这个自动完成功能，因为我没有你的资源。如果这是正确的，我们可以在你的代码中实现它。