twitter typeahead Wybór siły przy użyciu wstępnie pobranej zawartości

Question

Obecnie używam wtyczki twitter typeahead dla mojej witryny, as seen here.

Lista zostanie otwarta, a po wybraniu ukryte pole wprowadzania zostanie zaktualizowane o identyfikator zaznaczenia. Potrzebuję klawisza, aby wymusić wybór, aby identyfikator działał z tym, co użytkownik wpisał. Jeśli wartość się zmieni, identyfikator powinien zostać usunięty, dopóki nie zostanie dokonany prawidłowy wybór. Jeśli pole zostanie zamknięte bez wyboru, należy je opróżnić.

Do tej pory mam:

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

Nie mogę znaleźć przykład przymusowego wyboru, które stosuje się do tego kodu - w szczególności dlatego, że użycie metody preselekcji. Dlatego nie mogę sprawdzić, czy wartość znajduje się na liście, czy przynajmniej nie wiem jeszcze, jak to zrobić. Jak mogę sprawić, aby działało zgodnie z przeznaczeniem?

Answer 1

Nie znam żadnego prostego rozwiązania tego problemu, ale myślę, że mogę zapewnić obejście tego problemu.

można skasować ukryte wejście na change() razie będzie aktualizowana na typeahead:selected wydarzenie później:

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

Słabym punktem tej metody są:

• Nie wyczyść wpisz input, jeśli użytkownik wprowadzi coś, co nie wyzwoli autouzupełniania
• Użytkownik musi kliknąć menu rozwijane autouzupełniania (wyzwalacz typeahead:selected), aby ukryte dane wejściowe były wyświetlane jedli

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

nadzieję, że to pomaga.

Answer 2

Wierzę, że kod jest na dobrej drodze, można dodać w kilku ulepszeń, aby zapewnić zmodyfikowany i poprawiony tekst jest nadal ważna

$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: Uważam wpisywanie znaków z wyprzedzeniem chciałby uniknąć funkcji pełzania dla wszystkich użytku przypadki https://github.com/twitter/typeahead.js/issues/368