jquery - bootstraptypeaheadの戻り名とID

Question

やあ！私はTwitterのブートストラップを先行して使用しています：

json_encodeで応答を返すページを呼び出しています。ページは名前とIDを返します。

先行入力リストに名前のリストが表示されるようにしたいのですが、名前の1つを選択すると、id値が非表示フィールドに書き込まれます。

呼び出しは正常に機能し、フィールドの記述は簡単です。私が何をすべきかわからないのは、名前をIDから分割する方法です。

今、私が何かを検索すると、提案リストで次のような結果が返されます。

name1：id1 name2：id2

名前だけを見たいのですが、idの値も伝えたいです。

どうやってやるの？

 $(function(){
    $("#typeahead_<? print $key; ?>").typeahead(
        {
        source: function(query, process)
                    {
                    $.ajax({
                        url:    '/getAjaxProducts',
                        type:   'POST',
                        data:   'query=' + query,
                        dataType: 'JSON',
                        async: true,
                        success: function(data)
                                {
                                process(data);
                                }
                            });                 
                    }
        });
});

score 21 · Accepted Answer

名前とIDのペアを含む一般的なJSONドキュメントは次のようになります。

[
  {
    "id": 1
    "name": "firstName"
  },
  {
    "id": 2
    "name": "secondName"
  }
]

ここでの戦略は、結果を解析するときに名前をIDにマップするオブジェクトリテラルを作成する一方で、名前を使用して先行入力を設定することです。

var productNames = new Array();
var productIds = new Object();
$.getJSON( '/getAjaxProducts', null,
        function ( jsonData )
        {
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.name );
                productIds[product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
        } );

ユーザーが先行入力からアイテムを選択すると、選択したアイテムを次のコマンドで参照できます。

$( '#product' ).val()

選択したアイテムに関連付けられているIDは、次のコマンドで取得できます。

productIds[$( '#product' ).val()]

あなたの質問から、JSONドキュメントの構造が少し異なるように見えるので、必要に応じて解析を変更しますが、同じ一般的な戦略が適用されます。

score 11 · Accepted Answer

この投稿を「resurect」して申し訳ありませんが、私は夢中になるつもりでした！

これらのサンプルコードの使用に問題がある場合（いずれも機能していなかった場合、名前を表示する代わりにすべてが「未定義」を返していました）

追加するだけ

displayKey: 'name',

もちろん、「name」をリモートソースから返されたラベルvarnameに置き換えます

（最新のサンプルを見つけるのは非常に困難です。ネット上で見つかったサンプルのほとんどは、以前のバージョンの先行入力のものであり、新しいものと互換性がありません...）

score 8 · Accepted Answer

......updater: function (item) {
        var item = JSON.parse(item);
        console.log(item.name); 
        $('#VehicleAssignedTechId').val(item.id);       
        return item.name;
    }

タイプアヘッドコールのアップデータでは、上記のコードを入力できます。これにより、選択した値をテキストボックスに追加したり、他の非表示フィールドに値を入力する必要があります。

完全なajax呼び出しは次のとおりです。

$('#VehicleAssignedTechName').typeahead({
    source: function(query, process) {
        var $url =SITE_URL+ 'api/vehicle_techfield_typeahead/' + query + '.json';
        var $items = new Array;
        $items = [""];
        $.ajax({
            url: $url,
            dataType: "json",
            type: "POST",
            success: function(data) {
                console.log(data);
                $.map(data, function(data){
                    var group;
                    group = {
                        id: data.id,
                        name: data.name,                            
                        toString: function () {
                            return JSON.stringify(this);
                            //return this.app;
                        },
                        toLowerCase: function () {
                            return this.name.toLowerCase();
                        },
                        indexOf: function (string) {
                            return String.prototype.indexOf.apply(this.name, arguments);
                        },
                        replace: function (string) {
                            var value = '';
                            value +=  this.name;
                            if(typeof(this.level) != 'undefined') {
                                value += ' <span class="pull-right muted">';
                                value += this.level;
                                value += '</span>';
                            }
                            return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1.5em;">' + value + '</div>', arguments);
                        }
                    };
                    $items.push(group);
                });

                process($items);
            }
        });
    },
    property: 'name',
    items: 10,
    minLength: 2,
    updater: function (item) {
        var item = JSON.parse(item);
        console.log(item.name); 
        $('#VehicleAssignedTechId').val(item.id);       
        return item.name;
    }
});

score 1 · Accepted Answer

私の解決策は次のとおりです。

var productNames = new Array();
var productIds = new Object();
$.getJSON( '/getAjaxProducts', null,
        function ( jsonData )
        {
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.id + product.name );
                productIds[product.id + product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
        } );

私の場合、product.idはコードなので、先行入力コントロールで表示すると便利です。このようにして、名前の重複のリスクを回避しました。

score 0 · Accepted Answer

このコードを使用しているときに、一致に文字「st」が含まれている場合、先行入力の提案には先行入力の提案にスタイルタグが含まれていることに気付きました。

たとえば、提案された一致は次のように表示されます

style = "padding：10px; font-size：1.5em;">標準

それ以外の

標準

置換機能を次のように変更しました。

replace: function (string) {
  return String.prototype.replace.apply(this.name, arguments);
}

明らかに、追加のフォーマットは失われますが、「st」の一致では壊れません（「di」またはdivタグの他のサブストリングでも壊れると思います。

score 0 · Accepted Answer

ユーザー名とIDを処理しようとしたときに同じ問題が発生しました。トリッキーな修正がありましたが、後で適切な解決策で修正しました。

これを見てください、

$('#search').typeahead({
 source: function(query, process) {
 var $url = "/controller/function/list_users/?q="+query;
 var $datas = new Array;
 $datas = [""];
 $.ajax({
 url: $url,
 dataType: "json",
 type: "GET",
 success: function(data) {
 $.map(data, function(data){
 var group;
 group = {
 id: data.id,
 name: data.user_name,
 toString: function () {
 return JSON.stringify(this);
 //return this.variable;
 },
 toLowerCase: function () {
 return this.name.toLowerCase();
 },
 indexOf: function (string) {
 return String.prototype.indexOf.apply(this.name, arguments);
 },
 replace: function (string) {
 var value = '';
 value += this.name;
 if(typeof(this.name) != 'undefined') {
 value += ' <span class="pull-right muted">';
 //value += this.name;
 value += '</span>';
 }
 return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1em;">' + value + '</div>', arguments);
 }
 };
 $datas.push(group);
 });
process($datas);
 }
 });
 },
 property: 'user_name',
 items: 10,
 minLength: 2,
 updater: function (item) {
 var item = JSON.parse(item);
 $('#hiddenId').val(item.id);
 $('#username').val(item.name);
//you can perform your actions here
//example</p>
//location = '/controller/function/'+item.id+'/edit';
 //document.redirect = location;
}
});

このリンクも見てください。

http://vaisakhvm.wordpress.com/2013/07/31/twitter-bootstrap-typeahead-process-multiple-values/

jquery - bootstraptypeaheadの戻り名とID

6 に答える 6

Related

Reference