0

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

 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 但我希望名称出现在搜索框中，我该如何实现？我尝试在选择中添加代码和平 

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

但它没有任何建议？

4

1 回答 1

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/。

于 2013-06-23T12:27:12.693 回答