2016-03-21 13 views
0

私は自分の位置を選択できるようにtwitterの先読みを実装しました。彼は自分の場所nameを入力し、リストから選択し、選択した場所のidがフォームに投稿されます。twitter typeaheadでidから値を取得するには?

これは正常に動作し、私はこの次のリストを持っていると仮定します。

[ 
    United States : 1, 
    Canada : 2, 
    England: 3, 
    China: 4, 
    India: 5, 
    .... // other locations 
] 

今、ユーザーがカナダを選択して、フォームを送信し、ID 2はデータベースに保存されます。しかし、ユーザーが同じフォームに戻った場合、私は彼が選択した場所を取得するためにクエリを作成します。この場合、id 2が返されます。

どのように私は選択した位置を表示するために先読みでカナダを自動的に選択しますか?何のid値に基づいてテキスト値を移入するためのメカニズムに組み込まれていません、

iは

$('.typeahead').typeahead('val', value) //where value = 2 

を試みたが、先行入力制御は、「単なる」HTML入力であるので、これは

+0

私はすべてのエラーを得ることはありませんが、これは単に代わりに 'canada' – user2707590

+0

の先行入力中に '2'を入れ、[Aフィドル](https://jsfiddle.net/)を作成してください。 – Vucko

+0

ここには私が作成したjsフィドルです。あなたが場所を選択すると、IDは取得され、このIDはフォームが送信されるときにデータベースに格納されます。今私はDBから保存されたデータを取る必要があり、先読みで表示する。 fiddle:https://jsfiddle.net/mu3cxv9w/ – user2707590

答えて

1

を動作しません。 。あなたはその部分を自分でしなければなりません。

I've created a fiddle to demonstrate.

あなたはこれを達成するために様々な異なる方法を使用することができますが、私は私の実装では、それを処理するためにon focusを使用しています。この場合

.on('focus', function() { 
    if (defaultOption.length) { 
     var nm = $.map(locs, function(obj) { 
     if (obj.id === defaultOption) 
      return obj.name; // or return obj.name, whatever. 
     }); 
     console.log(nm); 
     $(this).data().ttTypeahead.input.trigger('queryChanged', nm); 
    } 
    }); 

、私は(バックデータベースから来るものだろう)はdefaultValueを提供し、最初の項目としてのソースに追加し、クエリ変更イベントをトリガーしています。

これを処理するもう1つの方法は、入力ボックスに期待値を簡単に事前入力することです。私はあなたがリンクされたフィドルの最後にこれを扱うことができる1つの方法のデモを含めました。コードはデフォルト値をチェックし、入力に正しい名前を設定します。

if (defaultOption.length) { 
    nm = $.map(locs, function(obj) { 
     if (obj.id === defaultOption) 
     return obj.name; // or return obj.name, whatever. 
    }); 
    } 

    $('.typeahead').val(nm); 
+0

なぜlocをハードコードしましたか? json APIを使用する必要がある場合はどうなりますか? と、この部分の詳しい情報があるところを教えてください。$(this).data().ttTypeahead.input.trigger( 'queryChanged'、nm); '。 typeahead.jsのドキュメントの には 'queryChanged'イベントさえありません。 – user2707590

+0

私はAPIコールを使用しています。しかし、表示したい文字列の値を返さない限り、それを探す必要があります。コードを見ると、デフォルトの "2"を "カナダ"という名前にマッピングしていて、 "カナダ"をテキストボックスに表示していることがわかります。 – whipdancer

+0

この行 '$(this).data().ttTypeahead.input.trigger( 'queryChanged'、nm);は完全な先頭オブジェクトを取得するためにjQueryを使用するハックです。検索結果に価値を与えることができます。 – whipdancer

関連する問題