Отправить выбор в автозагрузку Bootstrap typeahead ()? - PullRequest
Новая
       34

Отправить выбор в автозагрузку Bootstrap typeahead ()?

19 голосов
/ 24 февраля 2012

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

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

Ответы [ 6 ]

21 голосов
/ 03 марта 2013

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

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

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

10 голосов
/ 28 августа 2013

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

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

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

Больше информации о пользовательских событиях здесь и демонстрация о JSfiddle .

7 голосов
/ 24 февраля 2012

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

Если ваша typeahead выглядит примерно так ...Вы можете отправить его с помощью этого JavaScript. 

   <script type="text/javascript">
       $('#test-input').change(function() {
          $('#test-form').submit();
       });
   </script>
3 голосов
/ 25 февраля 2012

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

0 голосов
/ 16 июня 2015

Чтобы заполнить значение скрытого поля в html-форме из выбора данных typeahead, я сделал следующее: 

$('#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 голосов
/ 18 мая 2012

Я добавил 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);
});
...