web-dev-qa-db-ja.com

bootstrap-typeahead.jsはselectイベントでリスナーを追加します

私はBootstrap Twitterフレームワークを初めて使用します。オートコンプリートにはbootstrap-typeahead.jsを使用する必要がありますが、typeaheadに対してユーザーが選択した値を取得する必要もあります。

これは私のコードです：

<input type="text" class="span3" style="margin: 0 auto;" 
                   data-provide="typeahead" data- items="4" 
                   data-source='["Alabama","Alaska"]'>

Typeahead型から選択した値を取得し、関数に渡すためにリスナーを追加するにはどうすればよいですか？たとえば、ExtJを使用する場合、次の構造を適用します。

listeners: {
   select: function(value){
     ........
   }
}

先行入力で同様のことを行うにはどうすればよいですか？

jqueryjquery-uitwitter-bootstrap
52
jack.cap.rooney

「pdater」を使用する必要があります。

$('#search-box').typeahead({

    source: ["foo", "bar"],

    updater:function (item) {

        //item = selected item
        //do your stuff.

        //dont forget to return the item to reflect them into input
        return item;
    }
});
166
Capy

V3のTwitterでは、bootstrap typeaheadはドロップされ、Twitterのtypeaheadに置き換えられます（これには、必要な機能などがあります）

https://github.com/Twitter/typeahead.js

このような使用法：

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
});
55
P.Scheit

afterSelectを使用できます

$('#someinput').typeahead({ 
    source: ['test1', 'test2'], 
    afterSelect: function (item) {
        // do what is needed with item
        //and then, for example ,focus on some other control
        $("#someelementID").focus();
    }
});
19
ahmad molaie

答えてくれたP.scheitに感謝します。ユーザーがタブキーを押したときに自動補完を処理するソリューションにこれを追加します。

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) {
    console.log(datum);
}).on('typeahead:autocompleted', function (e, datum) {
    console.log(datum);
});
18
philippinedev

TwitterのBootstrap Typeaheadがselectで発生する要素の「変更」イベントを監視するだけで、これを機能させることができました。

var onChange = function(event) {
  console.log "Changed: " + event.target.value
};

$('input.typeahead').typeahead({ source: ['test1', 'test2'] });
$('input.typeahead').on('change', onChange);

ユーザーがtest1を選択すると、「変更：test1」が出力されます。

注：一致するものが見つからない場合でも、ユーザーが「Enter」を押すとイベントが発生するため、それが必要かどうかを判断する必要があります。特に、ユーザーが「te」と入力して「test1」をクリックすると、「te」のイベントと「test1」のイベントが得られるため、デバウンスすることをお勧めします。

（バージョン2.0.2 Twitter Bootstrap Typeahead）

5
Hollownest

タブ付きおよび選択済みのマルチイベントをオンにしたソリューションを以下に示します。

$('#remote .typeahead').on(
    {
        'typeahead:selected': function(e, datum) {
            console.log(datum);
            console.log('selected');
        },
        'typeahead:autocompleted': function(e, datum) {
            console.log(datum);
            console.log('tabbed');
        }
});
3
Abs

同じ問題がありました。この関数を使用して、カスタムイベントを作成できます： https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed （イベントを追加するには、先行入力プロトタイプ構造を知る必要があります）

0
user968167
$('input.typeahead').typeahead({ 
    source: ['test1', 'test2'], 
    itemSelected: function(e){ 
        ---your code here---
    } 
});
0
Konstantin Panfilov