我目前正在为我的网站使用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);
});
我找不到适用于此代码的强制选择示例,特别是因为我使用了预取方法。因此,我无法验证该值是否在列表中,或者至少我还不知道如何验证。如何使其按预期运行?
我不知道有任何直接的解决方案,但我想我可以提供一个变通方法。
您可以清除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/
希望能有所帮助。
我相信您的代码是正确的,可以添加一些增强功能,以确保修改和更正的文本仍然有效
$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 ''
附言:我相信Typeahead希望避免所有用例的功能蠕变https://github.com/twitter/typeahead.js/issues/368