4

私がやりたいことは、jQueryUI の関数を介してオートコンプリートを使用して結果を分類することです。いくつかのグーグル検索などの後、組み込み関数 (http://jqueryui.com/demos/autocomplete/#categories) があることがわかりましたが、この例はローカル データ ソース (JavaScript の配列) のみを対象としています。リモート データ ソースを扱っています。オートコンプリート側は、カテゴリ コードを追加しなくても正常に機能しますが、追加すると壊れます。

これは、php コード (json データを返す検索ページ) に問題がないことを意味します。

このコードは jQueryUI サイトから取得しました。

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

次に、それを検索側と組み合わせました（カテゴリに変更）：

$(function() {
        $( "#search" ).catcomplete({
            delay:0,
            source: "query/encode-json.php?term="+ $("#search").val(),
            select: function(event, ui){
                alert(ui.item.label);
            }
        });     
    });

しかし、それは機能しません:(私はたくさんグーグルで検索しましたが、他の誰もがjson側に問題を抱えていました.これが私のjsonデータです:

[{"value":"some dude","id":"1","category":"artist"},{"value":"some other dude","id":"2","category":"artist"}]
4

3 に答える 3

2

あなたの問題は、sourceオートコンプリートに渡す options オブジェクトのプロパティであると確信しています:

$("#search").catcomplete({
    delay:0,
    source: "query/encode-json.php?term="+ $("#search").val(),
    select: function(event, ui){
        alert(ui.item.label);
    }
});

sourceウィジェットをインスタンス化するときに一度評価されます。つまり、$("#search").val()ユーザーが入力するたびに実行されるわけではありません。

デフォルトでは、オートコンプリートtermはクエリ文字列で送信されるため、次のことができるはずです。

$("#search").catcomplete({
    delay:0,
    source: "query/encode-json.php",
    select: function(event, ui){
        alert(ui.item.label);
    }
});

配列をカテゴリ付きのローカルデータソースとして使用すると正常に動作するため、他のすべてが正しいと確信しています: http://jsfiddle.net/jadPP/

于 2012-07-30T01:50:18.743 に答える
0

これを使って：

http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

（更新しました）

お役に立てれば ：-）

于 2012-07-29T05:52:37.993 に答える
0

デフォルトの_renderItem()メソッドは を探しitem.labelますが、json データにはitem.value. encode-json.php スクリプトをlabelの代わりに使用するように変更するか、独自のコールバック関数を提供するvalueバージョンの を使用する必要があります。source:

于 2012-07-29T06:10:22.543 に答える