Question

这是我的jQuery自动完成搜索框的代码，在源代码中我正在推送像[{displayName :'john',value:'12345',email:'john@gmail.com'},...]这样的JSON对象数组

 var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
    $('.searchboxx').autocomplete({
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(contacts, function(contact) {
                return matcher.test(contact.displayName)
                        || matcher.test(contact.value) || matcher.test(contact.email);
            }));
        },
        select: function(event, ui) {
            var contact = ui.item;

        }
    }).data("ui-autocomplete")._renderItem = function(ul, contact) {
        return $("<li>")
                .append('<a><div class="row">' +
                contact.displayName + " <" + contact.value + ">" + " [" + contact.rel + "]" +
                '</div>' +
                '</div></a>')
                .appendTo(ul);
    };

我的ul就像<li>john<12345>[mobile]</li>,.....当我点击其中一个而不是，我在搜索框中得到12345但是我希望名字出现在搜索框中，我怎么能得到那个？我尝试在select

中添加代码

if(ui.item){
                    $('.searchboxx').val(contact.displayName);
                }

但它没有任何建议吗？

Answer 1

从response传递给source回调的数组通常包含属性label（在下拉列表中显示）和value（插入到输入元素中）的对象。联系人对象的value属性就是他们的ID，这就是插入的内容。

要插入您需要覆盖select事件所需的联系人姓名，例如

select: function(event, ui) {
    $(event.target).val(ui.item.displayName);
    return false;
}

要在键盘导航上显示名称，您需要同样覆盖focus。

另一种解决方案是为response提供一个属性为{ label: contact, value: contact.displayName }的对象数组。事件select和focus的默认处理程序将正常运行，并且只需稍微修改_renderItem。演示：http://jsfiddle.net/ZQ67m/。

jQuery自动完成选择中的麻烦

1 个答案: