0

数時間の解読チュートリアルの後、私はついにcodeigniterとjqueryのオートコンプリートを相互に連携させることができました...

Firebugは正しい検索用語をJSON形式で表示していますが、ドロップダウンボックスにテキストが表示されていません。結果が2つある場合は、2つの空の行が表示されます。

ここで「機能していない」ことがわかります：http：//rickymason.net/blurb/main/home

JS：

$(document).ready(function() {
    $(function(){
        $( "#filter" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "http://rickymason.net/blurb/main/search/",
                data: { term: $("#filter").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
        },
        minLength: 2
        });
    });
});

コントローラ：

    public function search()
    {
        $term = $this->input->post('term', TRUE);
        $this->thread_model->autocomplete($term);
    }

モデル：

    public function autocomplete($term)
    {
        $query = $this->db->query("SELECT tag
            FROM filter_thread ft
            INNER JOIN filter f
            ON ft.filter_id = f.filter_id
            WHERE f.tag LIKE '%".$term."%'
            GROUP BY tag");
        echo json_encode($query->result_array());
    }

うまくいけば、それは簡単な修正です！

ありがとう

4

2 に答える 2

1

SOでこの質問を見ると、応答リターンのフィールドlabelとフィールドを設定する必要があります。valuePHP JSON出力を一致するように配置するか、次のようなもの（テストされていない）でリターンをマップしてみてください。

response( $.map(data, function(item){
    return {
        label: item.tag,
        value: item.tag
    };
})
于 2012-05-29T18:37:03.320 に答える
1

あなたのコードをこのようなものに変更することはうまくいくでしょう（私はあなたのサイトでテストしました）

$( "#filter" ).autocomplete({
        source: function(request, response) {
            $.ajax({
            url: "http://rickymason.net/blurb/main/search/",
            data: { term: $("#filter").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.tag;
               }); 

               response(resp);
            }
        });
    },
    minLength: 2
});

上記のコードブロックをコピーしてFirebugコンソールに貼り付けてから、オートコンプリートを試してください。それが動作します。私はあなたのサイトで試しましたが、うまくいきました。

第二に、あなたは両方$(document).ready(function() {を必要とせず$(function(){、同時に彼らは同じことを成し遂げます。

jQueryUIオートコンプリートのこのセクションを確認してください

期待されるデータ形式

ローカルデータ、URL、またはコールバックからのデータには、次の2つのバリエーションがあります。

文字列の配列：

["Choice1"、 "Choice2"]

オブジェクトの配列

ラベルと値のプロパティ：[{ラベル： "Choice1"、値： "value1"}、

...]

参照：$。map

于 2012-05-29T18:44:42.027 に答える