1

PHP、JSON エンコードされた配列を返します

$this->load->model('car_model', 'cars');
$result = $this->cars->searchBrand($this->input->post('query'));
$this->output->set_status_header(200);
$this->output->set_header('Content-type: application/json');
$output = array();
foreach($result as $r)
    $output['options'][$r->brandID] = $r->brandName;
print json_encode($output);

出力:{"options":{"9":"Audi","10":"Austin","11":"Austin Healey"}}

JS が更新されました:

$(".searchcarBrands").typeahead({
    source: function(query, typeahead) {
        $.ajax({
            url: site_url + '/cars/search_brand/'+query,
            success: function(data) {
                typeahead.process(data);
            },
            dataType: "json"
        });
    },
    onselect: function(item) {
        $("#someID").val(item.id);
    }
});

更新: キャッチされていない TypeError: オブジェクト関数 (){return a.apply(c,e.concat(k.call(arguments)))} にはメソッド 'process' がありません

「A」だけを入力すると、先行入力は各結果の最初の文字 (A 文字の束) のみを表示します。2 番目の文字を入力すると、何も表示されなくなります。

データを試しJSON.parseたり、data.options を使用したりしましたが、うまくいきませんでした。

私は何を間違っていますか？

4

3 に答える 3

3

私はBootstrap 2.2.1で最後の日これと戦ってきました。何をしてもうまくいきませんでした。私にとっては、プロセス関数にブレークポイントを設定しない限り、常にプロセス未定義エラーが発生しました (おそらく、FireBug が開いていたためでしょうか?)。

とにかく、パッチとして、先行入力を省略して Bootstrap を再ダウンロードし、ここから先行入力を取得しました: https://gist.github.com/2712048

そして、このコードを使用しました：

$(document).ready(function() {
    $('input[name=artist]').typeahead({
        'source': function (typeahead) {
            return $.get('/7d/search-artist.php', { 'artist': typeahead.query }, function (data) {
                return typeahead.process(data);
            });
        },
        'items': 3,
        'minLength': 3
    },'json')
});

私のサーバーはこれを返します（「Bo」の場合）：

["Bo","Bo Burnham","Bo Diddley","Bo Bruce","Bo Carter",
 "Eddie Bo","Bo Bice","Bo Kaspers Orkester","Bo Saris","Bo Ningen"]

もちろん、今では minLength は無視されますが、1 日を乗り切ることができます。お役に立てれば。

編集: ここで解決策を見つけました: Bootstrap 2.2 Typeahead Issue

Bootstrap 2.2.1 に含まれている先行入力を使用すると、コードは次のようになります。

    $(document).ready(function() {
        $('input[name=artist]').typeahead({
            'ソース': 関数 (クエリ、先行入力) {
                return $.get('/search-artist.php', { 'artist': encodeURIComponent(query) }, 関数 (データ) {
                    タイプアヘッド（データ）を返します。
                });
            }、
            「アイテム」: 3,
            'minLength': 3
        },'json')
    });
于 2012-12-07T18:33:13.643 に答える
2

ブートストラップのタイプアヘッドを使用してリモート データ ソースを容易にするために私が行っていることは次のとおりです。

$("#search").typeahead({

    source: function(typeahead, query) {

        $.ajax({

            url: "<?php echo base_url();?>customers/search/"+query,
            success: function(data) {

                typeahead.process(data);
            },
            dataType: "json"
        });
    },
    onselect: function(item) {

        $("#someID").val(item.id);
    }
});

value次に、JSON でエンコードされた配列に、ラベルのインデックスと、id後で非表示の ID を設定するためのフィールドが含まれていることを確認する必要があります。次のようにします。

$this->load->model('car_model', 'cars');
$brands = $this->cars->searchBrand($this->uri->segment(4));
$output = array();
foreach($brands->result() as $r) {

    $item['value'] = $r->brandName;
    $item['id']    = $r->brandID;
    $output[] = $item;
}
echo json_encode($output);
exit;
于 2012-11-06T13:59:14.177 に答える
0

$.post は非同期であるため、ユーザーがそこに戻ることはできません。それは何も返しません。

于 2012-11-06T13:53:03.447 に答える