web-dev-qa-db-ja.com

Bootstrap typeahead（）オートコンプリートで選択を送信しますか？

Twitter Bootstrap typeahead（））で行った選択を自動送信するにはどうすればよいですか？

http://Twitter.github.com/bootstrap/javascript.html#typeahead

autocompletetwitter-bootstraptypeahead
19
Nathan Waters

どうやらいくつかのgitマージリクエストがあります。これは仕事をし、オブジェクトの配列を先行入力に送信できるようにします： https://github.com/Twitter/bootstrap/pull/1751

3
Nathan Waters

updaterコールバックを使用するクリーンな方法があります。

input.typeahead({
    'source' : ['foo', 'bar'],
    'updater' : function(item) {
        this.$element[0].value = item;
        this.$element[0].form.submit();
        return item;
    }
});

ユーザーがオプションを（マウスクリックまたはキーボードで）選択すると、コールバックが入力ボックスに入力され、フォームを送信します。

21
erenon

外部を使用する場合 typeahead.js プラグイン（Bootstrap 3）に推奨）：

選択時にフォームをトリガーするには、カスタムイベントを使用するだけです。

$('#my-input')
   .typeahead({/* put you options here */})
   .on('typeahead:selected', function(e){
     e.target.form.submit();
   });

カスタムイベントの詳細 ここ および JSfiddle に関するデモ。

10
HaNdTriX

最善の解決策ではないかもしれませんが、ローカルで先行入力セットアップでこれを試したところ、うまくいきました。

先行入力が次のようになっている場合...

    <form id="test-form" method="post" action="">
            <input id="test-input" type="text" data-provide="typeahead" 
             data-source='["1","2',"3"]' />
    </form>

次に、このjavascriptを使用して送信できます。

   <script type="text/javascript">
       $('#test-input').change(function() {
          $('#test-form').submit();
       });
   </script>
7
Jako

先行入力データ選択からhtmlフォームの非表示フィールドの値を入力するために、次のことを行いました。

$('#prefetch').typeahead({
 hint: true,
 highlight: true,
 minLength: 1
},
{
 name: 'trees',
 source: trees,
 limit: 15 
}).on('typeahead:selected', function(e) {
 var result = $('#prefetch').val()
 $('#formpane input[name=\"myID\"]').val(result)
});

参考までに、htmlコードは次のとおりです。

<body>
 <div id="formpane">
  <form action="/thanks" method="POST">
    <input class="typeahead" type="text" placeholder="select categories" id="prefetch">
    <button type="submit">Submit</button>
    <input type="hidden" name="myID" />
  </form>
 </div>
<script type="text/javascript" src="js_file_above.js"></script>
</body>
0
Vladimir Dubovskiy

入力にblurコールバックを追加しました。少し待つ必要があることに注意してください。typeaheadは入力の値を変更する可能性があり、その前にblurコールバックは呼び出されません。これは単なる回避策ですが、機能します。

$('input.myTypeaheadInput').blur(function(e) {
    window.setTimeout(function() {
        window.console && console.log('Works with clicking on li item and navigating with the keyboard. Yay!');
    }, 50);
});
0
mAu