jquery - 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); 
});

该方法的弱点是:

• 如果用户输入的内容不会触发自动完成，它不会清除预输入输入
• 用户必须点击自动完成下拉菜单(触发 typeahead:selected)才能填充隐藏的输入

演示:http://jsfiddle.net/hieuh25/zz85q/

希望有帮助。