6

我目前正在为我的网站使用 twitter typeahead 插件，如此处所示。

列表打开，并且在选择时，隐藏的输入字段会更新为选择的 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); 
});

我找不到适用于此代码的强制选择示例 - 特别是因为我使用了预取方法。因此，我无法验证该值是否在列表中，或者至少我还不知道如何验证。我怎样才能让它按预期运行？

4

2 回答 2

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/

希望能帮助到你。

于 2013-08-05T10:03:00.543 回答
1

我相信您的代码在正确的轨道上，可以添加一些增强功能以​​确保修改和更正的文本仍然有效

$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：我相信 Typeahead 希望避免所有用例的功能蔓延 https://github.com/twitter/typeahead.js/issues/368

于 2013-08-23T14:02:58.773 回答