twitter typeahead Принудительный выбор с предварительно выбранным содержимым

В настоящее время я использую плагин twitter typeahead для своего веб-сайта, как показано здесь.

Список открывается, и при выборе скрытое поле ввода обновляется идентификатором выбора. Мне нужен ввод, чтобы принудительно выбрать, чтобы идентификатор работал с тем, что набрал пользователь. Если значение изменяется, идентификатор должен быть удален до тех пор, пока не будет сделан правильный выбор. Если окно закрывается без выбора, они оба должны быть опустошены.

Пока у меня есть:

$('.cp').typeahead({                              
  name: 'nom',                                                          
  prefetch: 'ajax_recherche_ville.php',                                         
  limit: 50                                                    
});

$('.cp').bind('typeahead:selected', function(obj, datum) {        
        $('input:hidden[name=ville_id]').val(datum.id); 
});

Я не могу найти пример принудительного выбора, применимого к этому коду, особенно потому, что я использую метод предварительной выборки. Поэтому я не могу проверить, находится ли значение в списке, или, по крайней мере, я пока не знаю, как это сделать. Как я могу заставить это работать, как задумано?


jquery typeahead.js typeahead bootstrap-typeahead
person Patrick Simard    schedule 26.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не знаю никакого прямого решения для этого, но я думаю, что могу найти обходной путь.

Вы можете очистить скрытый ввод в событии change(), он будет обновлен позже в событии typeahead:selected:

$('.cp').typeahead({                              
    name: 'nom',                                                          
    prefetch: 'ajax_recherche_ville.php',                                         
    limit: 50                                                    
}).change(function () {
     $('input[name=ville_id]').val(''); // don't use :hidden since it slow down performance and doesn't do anything special, I suppose the input with name ville_id is unique
}).bind('typeahead:selected', function(obj, datum) {        
     $('input[name=ville_id]').val(datum.id); 
});

Слабое место этого метода:

  • Он не очищает ввод текста, если пользователь вводит что-то, что не запускает автозаполнение.
  • Пользователь должен щелкнуть раскрывающийся список автозаполнения (триггер typeahead:selected), чтобы заполнить скрытый ввод.

Демонстрация: http://jsfiddle.net/hieuh25/zz85q/

Надеюсь, поможет.

person Hieu Nguyen    schedule 05.08.2013

arrow_upward
1
arrow_downward

Я считаю, что ваш код находится на правильном пути, вы можете добавить несколько улучшений, чтобы гарантировать, что измененный и исправленный текст по-прежнему действителен.

$sourceSelect = @$el.find('[name="source_venue_name"]')
$sourceSelect.typeahead [
  {
    valueKey: 'name'
    remote:
      url: '/apis/venues?q=%QUERY'
    ]
  }
]

# hidden id
$sourceId = @$el.find('[name="source_venue_id"]')

$sourceSelect.on 'typeahead:selected', (e, item) =>
  # set hidden id on selection
  $sourceId.val item.id
  # remember selection
  $sourceSelect.attr 'data-name', item.name
  $sourceSelect.attr 'data-id', item.id

$sourceSelect.on 'change', () =>
  # if changed value is same as selected text
  if $sourceSelect.val() is $sourceSelect.attr 'data-name'
    $sourceId.val $sourceSelect.attr 'data-id'
  else # changed to be invalid
    $sourceId.val ''

PS: я считаю, что Typeahead хотел бы избежать расширения возможностей для всех случаев использования https://github.com/twitter/typeahead.js/issues/368

person Desmond Lua    schedule 23.08.2013