1

カテゴリで JQuery UI リモート オートコンプリートを使用しています。

$.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;
            }
            cat = currentCategory;
            self._renderItem( ul, item );
        });
    }
});

$(function() {
        $( "#birds" ).catcomplete({
            delay:0,
            source: "/search.html?term="+ $("#birds").val(),
            minLength: 2,
            select: function( event, ui ){
            alert(ui.item.value);
            }
        });     
});

ソースから取得した結果は次のとおりです。

[{"value":"ただの商品","id":"1","category":"カテゴリー名"}]

問題は、アラート(ui.item.value)を機能させて選択したアイテムを表示できないことです。

何か助けてください。

ありがとう。

4

1 に答える 1

0

これは、ソースを処理する方法ではありません。これを参照してください.. http://api.jqueryui.com/autocomplete/#option-source 使用できます

  • 配列
  • ストリング
  • コールバック関数

ページから json 形式でデータを受け取りたい場合は、jquery の $.ajax() を使用します ajax については、http: //api.jquery.com/jQuery.ajax/

あなたは次のようなことができます

$.ajax({url: 'search.php?term='+$("#birds").val(),
dataType: 'json',
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Accept","application/json");
},
async: false,
success: function(data){
bArray=new Array;
bJson=data;
bArray.push(bJson[0].value);
bArray.push(bJson[0].id);
bArray.push(bJson[0].category);// for multiple records put these 3 lines in loop and replace 0 with a counter
}
});

$( "#birds" ).autocomplete({
source: bArray,
select:function(event,ui)
{alert(ui.item.value);}     
});

bArray、bJson の宣言を忘れないでください

しかし、私はまだあなたがそれを間違っていると言うでしょう. value、id、category を一緒に使用する代わりに、そのうちの 1 つだけをオートコンプリートとして使用します。オートコンプリートに正確に表示されているものを教えてください

于 2012-10-25T09:52:08.150 に答える