Добавить выбор в Bootstrap typeahead() автозаполнения?

Как я могу автоподтвердить выбор, сделанный с помощью Twitter Bootstrap typeahead()??

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

Ответ 1

По-видимому, существует несколько запросов на слияние git. Этот выполняет эту работу и позволяет отправлять массив объектов typeahead: https://github.com/twitter/bootstrap/pull/1751

Ответ 2

Существует чистый способ использования обратного вызова updater:

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

Когда пользователь выбирает параметр (щелчком мыши или клавиатурой), обратный вызов заполняет поле ввода и отправляет форму.

Ответ 3

Если вы используете внешний плагин typeahead.js (рекомендуется для Bootstrap 3):

Для запуска формы при выборе просто используйте пользовательские события.

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

Подробнее о пользовательских событиях здесь и о JSfiddle.

Ответ 4

Не может быть лучшим решением, но я просто попробовал это на своей настройке typeahead локально, и это сработало.

Если ваш typeahead выглядит примерно так:

    <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>

Ответ 5

Я добавил обратный вызов 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);
});

Ответ 6

Чтобы заполнить значение скрытого поля в форме 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>