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

Question

В настоящее время я использую плагин twart typeahead для моего сайта, as seen here.

Список открывается, и при выборе скрытое поле ввода обновляется с идентификатором выбора. Мне нужно 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); 
}); 

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

Answer 1

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

Вы можете очистить скрытый вход на 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 input, если пользователь вводит что-то, что не запускает автозаполнение
• Пользователь должен нажать на раскрывающийся список автозаполнения (триггер typeahead:selected), чтобы скрытый вход в popul ел

Demo: http://jsfiddle.net/hieuh25/zz85q/

Надеется, что это помогает.

Answer 2

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

$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: Я считаю, что машинописный хотел бы избежать функции ползучести для всех использования случаев https://github.com/twitter/typeahead.js/issues/368