twitter typeahead Selezione forzata con contenuto prefissato

Question

Attualmente sto utilizzando il plug-in Twitter typeahead per il mio sito web, as seen here.

L'elenco si apre e, alla selezione, un campo di inserimento nascosto viene aggiornato con l'ID di selezione. Ho bisogno di typeahead per forzare la selezione affinché l'ID funzioni con ciò che l'utente ha digitato. Se il valore cambia, l'ID dovrebbe essere rimosso fino a quando è stata effettuata una selezione valida. Se la scatola si chiude con una selezione, entrambi devono essere svuotati.

Finora ho:

$('.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); 
}); 

non riesco a trovare un esempio di selezione forzata che si applica a questo codice - in particolare perché io uso il metodo prefetch. Pertanto, non posso convalidare se il valore è nella lista, o almeno non so ancora come. Come posso farlo funzionare come previsto?

Answer 1

Non conosco alcuna soluzione immediata per questo, ma suppongo di poter fornire una soluzione alternativa.

È possibile cancellare l'ingresso nascosto sul change() evento, sarà aggiornato sulla typeahead:selected evento successivo:

$('.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); 
}); 

Il punto debole di questo metodo sono:

• non lo fa cancellare il input di tipo typeahead se l'utente immette qualcosa che non attiva il completamento automatico
• L'utente deve fare clic sul menu a discesa del completamento automatico (trigger typeahead:selected) affinché l'input nascosto venga visualizzato ate

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

Speranza che aiuta.

Answer 2

Credo che il codice è sulla strada giusta, potrebbe aggiungere in pochi miglioramenti per assicurare modificato e testo corretto è ancora valido

$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: Credo typeahead vorrebbe evitare caratteristica scorrimento per tutti gli usi casi https://github.com/twitter/typeahead.js/issues/368