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

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

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


autocomplete twitter-bootstrap typeahead
person Nathan Waters    schedule 24.02.2012    source источник
comment
Если вы все еще ищете, я создал расширение для плагина Typeahead, чтобы добавить некоторые функции, подобные той, о которой вы спрашивали. github.com/tcrosen/Bootstrap-Typeahead-Extension   -  person Terry    schedule 04.04.2012

Ответы (6)


arrow_upward
22
arrow_downward

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

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

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

person erenon    schedule 02.03.2013
comment
поле выбрано (и заполнено), но форма не отправлена. $('#search-box.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', displayKey: 'value', source: substringMatcher(states), updater : function(item) { this.$element[0].value = item; this.$element[0].form.submit(); return item; } }); - person Hammad Khan; 20.07.2018

arrow_upward
11
arrow_downward

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

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

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

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

person HaNdTriX    schedule 28.08.2013
comment
спас мне жизнь @HaNdTriX - person Kathan; 21.07.2015
comment
Я рад слышать, что. :-) - person HaNdTriX; 21.07.2015

arrow_upward
7
arrow_downward

Возможно, это не лучшее решение, но я только что попробовал это на своей локальной настройке 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>
person Jako    schedule 24.02.2012
comment
Хм, только что попробовал. Кажется, работает только тогда, когда я напрямую выбираю параметр, но не когда нажимаю Enter или Tab для выбора. - person Nathan Waters; 25.02.2012

arrow_upward
3
arrow_downward

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

person Nathan Waters    schedule 25.02.2012
comment
Я понимаю, что это не лучшее решение. Но это было единственное, что я мог придумать как временное решение. - person Jako; 28.02.2012

arrow_upward
0
arrow_downward

Я добавил обратный вызов blur на вход. Имейте в виду, что вам нужно подождать в течение короткого периода времени, этот ввод может изменить значение на входе, и обратный вызов 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);
});
person mAu    schedule 18.05.2012

arrow_upward
0
arrow_downward

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