twitter typeaheadプリフェッチされたコンテンツを使用した強制選択

Question

現在、私のウェブサイトにはtwitter typeaheadプラグインを使用しています。as seen here

リストが開き、選択時に非表示の入力フィールドが選択IDで更新されます。 IDがユーザーが入力した内容で動作するように選択を強制するには先読みが必要です。値が変更された場合は、有効な選択が行われるまでIDを削除する必要があります。ボックスを選択なしで閉じると、両方とも空にする必要があります。

これまでのところ私が持っている：

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

この方法の弱点は、次のとおりです。

• それはクリアされません。オートコンプリートをトリガーしないものをユーザーが入力した場合に先読み入力
• ユーザーは隠れた入力をpopulするためにオートコンプリートドロップダウン（トリガーtypeahead:selected）をクリックする必要があります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