web-dev-qa-db-ja.com

Bootstrapの先行入力の選択された項目の値を取得します

ブートストラップはtypeaheadと呼ばれるきちんとしたオートコンプリート機能を実装しました。テキスト入力に適切な値を取得できません。

たとえば、次のようなものがあります。

$('input').on('change', function(){
    console.log($(this).val());
});

これは、選択した値をキャプチャするために表示されません。誰もがBootstrapでtypeaheadを使用して選択した値を取得する方法を知っていますか？

jquerytwitter-bootstraptypeahead
14
T.S.
$('#autocomplete').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
$('#autocomplete').on('typeahead:cursorchanged', function (e, datum) {
    console.log(datum);
});

Typeaheadの変更されたリスナーと使用法は十分に文書化されていないようです。これらのリスナーを使用できます。

[〜＃〜]更新[〜＃〜]

新しいバージョンでは、イベント名がtypeahead:selectに変更されました。

44
ymutlu

あなたはそれを間違った角度から見ています。 Bootstrapのtypeaheadメソッドには、選択した値を引数として受け取るコールバック関数を渡すことができるオプションがあります。以下は、この1つの引数のみを示す要約例です。

$('#typeaheadID').typeahead({
    updater: function(selection){
        console.log("You selected: " + selection)
    }
})

乾杯！ ドキュメント参照

20
Secesh

私はこれで作業しており、現在同じ問題が発生しています。このきれいなフォークで解決するつもりです

https://Gist.github.com/1891669

そして私はコールバックでそれをしました：

  $('.typeahead').typeahead({
    // note that "value" is the default setting for the property option
    source: [{value: 'Charlie'}, {value: 'Gudbergur'}, ...],
    onselect: function(obj) { console.log(obj) }
  })

それがあなたにも役立つことを願っています。

7
vanhalt

ページに1つしかない場合は$('ul.typeahead li.active').data('value');を試すことができますが、ページに1つ以上あると問題が発生する可能性があります。

入力値が設定されていないのには理由があるのでしょうか？

4
kendaleiv
$('#myselector').typeahead({
itemSelected:function(data,value,text){
   console.log(data)
    alert('value is'+value);
    alert('text is'+text);
},
//your other stuffs
});

コールバック関数でitemSelectedを渡すだけで、選択したアイテムが得られます。

これがうまくいくことを願っています。

2
Mr.k

選択したアイテムを操作するために別のボタンを使用している場合、または更新直後にこのアイテムを取得する必要がある場合は、$("#your_input").next("ul").find("li.active").data("value");を使用して値を取得できます。

Ajaxのために働くbootstrap typeahead。

0
Filip Kováč