10

そこで、カスタムオートコンプリートボックスを作成しています。ここでは、次のようなローカルデータの配列がデータソースです。

{
            label: "joe",
            category: "people"
}

次のようにメニューのカテゴリを有効にするようにrendermenu関数をカスタマイズしました：

 $.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);
        });
    }
});

そして私はすべてを初期化しています：

 $("#search").catcomplete(getConfig(all));

getConfigは次のとおりです。

function getConfig(data) {
// autocomplete box configuration for searchbars

return {
    delay: 0,
    source: function (request, response) {
        var prune = request.term,
            arr = prune.split(":");

        if (arr.length > 2) {
            response();
        } else {
            response($.ui.autocomplete.filter(data, arr[arr.length - 1]));
        }
    },
    select: function (e, ui) {
        e.preventDefault();
        addBit(ui.item);
        e.originalEvent.stopPropagation();
    },
    focus: function (e, ui) {
        //console.log(e);
        //e.preventDefault();
        //console.log(ui);
        //$('ul.autocomplete li#floatinput input#search').val(ui.item.category + ":" + ui.item.label);
    },
    position: {
        my: "left top",
        at: "left bottom",
        of: $("ul.autocomplete"),
        collision: "flip flip"
    }
}
}

しかし、どういうわけか、フォーカスイベントにはアイテムが定義されていません。フォーカス関数を完全に削除しようとしましたが、取得するだけでした：Uncaught TypeError：undefinedのプロパティ'value'を読み取ることができません。これは、イベントのデフォルトの動作が機能しないことを意味します。

どんな提案も歓迎します！

これが私が説明するのを助けるために作ったフィドルです> http://jsfiddle.net/ahTCW/3/

4

1 に答える 1

18

jQueryUI >= 1.9 で使用し、使用_renderItemDataしない:_renderItem

// getconfig
$.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 style='clear:both'class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItemData(ul, item);
        });
    }
});

別のエラーが発生しています:

キャッチされていない TypeError: 未定義のプロパティ 'nodeType' を読み取れません

ofこれは、位置オブジェクトのプロパティに渡すオプションが原因です。ul.autocompleteオートコンプリート ウィジェットがインスタンス化されたときにページに存在しません。

更新された例: http://jsfiddle.net/kHNS5/

于 2012-11-19T02:19:03.100 に答える