web-dev-qa-db-ja.com

jqueryオートコンプリートrenderItem

次のコードがあります。 jsエラーは生成されません。結果を表示するオートコンプリートを取得できません：

$(function() {
    $.ajax({
    url: "data.xml",
    dataType: "xml",
    cache: false,
    success: function (xmlResponse) {
        var data_results = $("Entry", xmlResponse).map(function () {
            return {
                var1: $.trim($("Partno", this).text()),
                var2: $.trim($("Description", this).text()),
                var3: $.trim($("SapCode", this).text()),
                var4: $("Title", this).text(),
                var5: $.trim($("File", this).text()),
                var6: $.trim($("ItemID", this).text())
            };
        }).get();

        $("#searchresults").autocomplete({
            source: data_results,
            minLength: 3,
            select: function (event, ui) {
                ...
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" ).data("item.autocomplete", item)
                    .append( "<a>" + item.var1 + "<br>" + item.var2 + "</a>")
                    .appendTo( ul );
        };

    }
});

私が見逃しているかもしれないアイデア前もって感謝します。

jquery-uijquery-ui-autocomplete
11
Esteban

.data('autocomplete')は.data('ui-autocomplete')になりました。

ソース： http://jqueryui.com/upgrade-guide/1.10/#re​​moved-data-fallbacks-for-widget-names

29
Dzulqarnain Nasir

デフォルトでは、オートコンプリートは、ソース配列にlabelプロパティ、valueプロパティ、またはその両方のオブジェクトが含まれていることを想定しています。

これを念頭に置いて、2つのオプションがあります。

  1. AJAX呼び出しからの配列を処理するときに、ソースオブジェクトにラベルまたは値のプロパティを追加します。

    var data_results = $("Entry", xmlResponse).map(function () {
    return {
        var1: $.trim($("Partno", this).text()),
        var2: $.trim($("Description", this).text()),
        var3: $.trim($("SapCode", this).text()),
        var4: $("Title", this).text(),
        var5: $.trim($("File", this).text()),
        var6: $.trim($("ItemID", this).text()),
        value: $.trim($("Description", this).text())
    };
}).get();

    割り当てたvalueは、focus、select、および検索で使用されます。

  2. source関数を変更して、カスタムフィルタリングロジックを実行します。

    $("#searchresults").autocomplete({
    source: function (request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

        response($.grep(data, function (value) {
            return matcher.test(value.var1) || 
                   matcher.test(value.var2);
            /* etc., continue with whatever parts of the object you want */
        }));
    },
    minLength: 3,
    select: function (event, ui) {
        event.preventDefault();
        this.value = ui.var1 + ui.var2;
    },
    focus: function (event, ui) {
        event.preventDefault();
        this.value = ui.var1 + ui.var2;
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" ).data("item.autocomplete", item)
            .append( "<a>" + item.var1 + "<br>" + item.var2 + "</a>")
            .appendTo( ul );
};

    この戦略では、カスタムselectおよびfocusロジックを実装する必要があることに注意してください。

7
Andrew Whitaker