jquery ui 自动完成按钮和显示问题

Question

我有以下代码:

function testSearch() {
    $(".searchfield").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{ path('my_search') }}",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.label,
                            value: item.value
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            $.each(ui, function (key, value) {
                window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value

            });
        },
        focus: function (event, ui) {
            /* $.each(ui, function(key, value) {
                alert(key + " " + value);
            });*/
        },
    })
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        var a = $('<a>', {
            href: "{{ path('my_show_product', {'productId': ''}) }}" + "/" + item.value,
            text: item.label
        });

        var $li = $('<li></li>', {
            style: "width:100%"
        });

        return $li.append(a).data('item.autocomplete', item.value).appendTo(ul);
    };
}

我的数据是从上面的 $.ajax 函数调用的函数返回的，采用以下 json 格式:

[ { label: 'test label', value: '1234' }, { label: 'test label1', value: '4567' } ]

输入字段如下所示:

<input type="text" class="searchfield" name="searchfield" value="Search for Products" />

到目前为止，我可以搜索项目并获得上述格式的结果，并以列表形式显示在前端。每个项目引用一个页面 http://mydomain/products/(value )

目前，我遇到以下问题:如果我搜索某些内容并出现搜索列表，我可以使用键盘在列表中导航，点击回车按钮并重定向到正确的页面，但每个页面的完整标签我正在关注的项目未显示在上面显示的输入搜索字段中。

我怎样才能实现这个目标？

编辑:所以我尝试将代码修改为以下内容:

function testSearch() {
$(".searchfield").autocomplete({
source:  function( request, response ) {
    $.ajax({
        url: "{{ path('my_search') }}",
        dataType: "json",
        data: {
            term: request.term
        },
        success: function( data ) {

            response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.value
                }
            }));
        }
    });
},
minLength: 1,
select: function( event, ui ) {

    $.each(ui, function(key, value) {
      window.location = "{{ path('my_show_product', {'productId': ''}) }}"+"/" + value

        });
},

focus: function(event, ui){ 

    $('.ui-autocomplete-input').val(ui.item.label);
            $(this).val(ui.item.label);
    //alert($('#searchfield')[0].className);
    //alert(ui.item.label);
    //$(this).val($(ui.item).text());
//  $('.searchfield').val($(this).val(ui.item.label)); 

    }

})
$.ui.autocomplete.prototype._renderItem = function(ul, item) {

var a = $('<a>', {
    href: "{{ path('my_show_product', {'productId': ''}) }}"+"/" + item.value,
    text: item.label
});

 var $li = $('<li></li>', {style:"width:100%"});

 return $li.append(a).data('item.autocomplete',  item).appendTo(ul);

};

}

但似乎响应出现了问题:如果我离开:

response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.value
                }
            }));

比文本字段获取每个标签的“值”，这不是我想要的。如果我将其更改为:

response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.label
                }
            }));

我在输入字段中看到标签，但每个项目的链接位于结构 http://mydomain/(label ) 而不是 http://mydomain/(value ) 中。我需要的是后一个。

有什么想法吗？

Answer 1

因为您没有在 focus 事件中执行任何操作。

如果您想要特定的内容，那么您可以在 focus 事件中执行此操作，否则只需将其从选项中删除即可。默认情况下，如果您未在选项中指定 focus 事件，插件将负责将突出显示的值设置到 textbox 中。

    $(".searchfield").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{ path('my_search') }}",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.label,
                            value: item.value
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            $.each(ui, function (key, value) {
                window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value

            });
        }
    })