jquery - jquery自动完成查询

Question

我需要在自动完成的结果列表中添加另一个元素。该元素不应该是可点击的，并且应该作为搜索列表中的信息。

我正在尝试下面的代码并使用 appendTo 选项，但它似乎不起作用

var acOptions = {
    source: userNames,
    minLength: 1,
    appendTo: "<li class='ui-menu-item' role='menuitem'>Search by username </li>"
};

$('input.userName').autocomplete(acOptions);

有人可以在这里指导我吗？

Answer 1

这是http://jqueryui.com/demos/autocomplete/#categories是你要找的吗？这是一个工作演示http://jsfiddle.net/pomeh/XJ47e/。

HTML 代码

<div class="demo">
    <label for="search">Search: </label>
    <input id="search" />
</div>

<p>A categorized search result. Try typing "a" or "n".</p>

​</p>

Javascript代码

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});


var data = [
    { label: "anders", category: ""},
    { label: "andreas", category: ""},
    { label: "antal", category: ""},
    { label: "annhhx10", category: "Products"},
    { label: "annk K12", category: "Products"},
    { label: "annttop C13", category: "Products"},
    { label: "anders andersson", category: "People"},
    { label: "andreas andersson", category: "People"},
    { label: "andreas johnson", category: "People"}
];

$("#search").catcomplete({
    delay: 0,
    source: data
});

CSS 代码

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}​