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事件中执行此操作，否则只需将其从选项中删除即可。默认情况下，如果您未在选项中指定textbox事件，则插件会将突出显示的值设置为focus。

    $(".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

            });
        }
    })

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

1 个答案: