2

オートコンプリートの結果リストに別の要素を追加する必要があります。この要素はクリック可能であってはならず、検索リストの情報として機能する必要があります。

以下のコードを試して appendTo オプションを使用していますが、うまくいかないようです

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

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

誰かが私をここに導くことができますか？

4

1 に答える 1

4

これは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;
}​
于 2012-04-23T10:22:08.980 に答える