web-dev-qa-db-ja.com

bootstrap typeahead return name and id

やあ！私は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);
                                }
                            });                 
                    }
        });
});
jquerytwitter-bootstraptypeaheadbootstrap-typeahead
6
iMoldovean.com

名前と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ドキュメントの構造が少し異なるように見えるので、必要に応じて解析を変更しますが、同じ一般的な戦略が適用されます。

21
Corby Page

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

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

追加するだけです

displayKey: 'name',

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

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

8
user2969295
......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;
    }
});
7
Jhanvi

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

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はコードなので、先行入力コントロールで表示すると便利です。このようにして、名前の重複のリスクを回避しました。

0
Kate.spot

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

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

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

の代わりに

標準

置換関数を次のように変更しました。

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

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

0
osyntax

ユーザー名と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/

0
ysk