Bootstrap Typeahead Only Allow List Values

Question

是否可以将用户的选择限制为Bootstrap Typeahead项目的预定义数据源项目？那么，如果用户键入了不在数据源中的内容，就会显示一条消息通知他们？

以下是演示：http://cruiseoutlook.com/test

Answer 1

如果我理解，当typeahead组件失去焦点时，如果它不在列表中，则应该提醒用户其输入无效？

因此，代码将是这样的：

var myData = [...]; // This array will contain all your possible data for the typeahead
$("#my-type-ahead").typeahead({source : myData})
.blur(validateSelection);
function validateSelection() {
if(source.indexOf($(this).val()) === -1) 
alert('Error : element not in list!');
}

请注意，indexOf没有在IE6-8中实现。但是可以找到垫片，例如：查找项目是否在JavaScript数组中的最佳方法。

Answer 2

我遇到了同样的问题，但在我的情况下，我的所有数据都是远程的。据我所知，Bloodhound并没有任何好的挂钩可以让你做到这一点，但你可以挂钩到ajax完整的回调中，手动建立一个有效的输入缓存，然后在更改/模糊时进行检查。

var myData = new Bloodhound({
remote: {
url: '/my/path/%QUERY.json',
ajax: {
complete: function(response){
response.responseJSON.forEach(function (item) {
if (myData.valueCache.indexOf(item.value) === -1) {
myData.valueCache.push(item.value);
}
});
}
}
}
});
myData.valueCache = [];
myData.initialize();
$('#artists .typeahead').typeahead(null, {
source: myData.ttAdapter()
}).bind('change blur', function () {
if (myData.valueCache.indexOf($(this).val()) === -1) {
$(this).val('');
}
});

Answer 3

使用jquery和Samuel的解决方案，我认为您将克服IE问题。将validateSelect函数更改为：

function validateSelection() {
if ($.inArray($(this).val(), myData) === -1) 
alert('Error : element not in list!');
}

剩下的就照塞缪尔所说的去吧。

Answer 4

我以不同的方式解决了这个问题-大多数时候，您需要捕获建议选项的id，以便发布到后续的web服务调用，等等。

我决定在typeahead异步调用开始时清空一个隐藏字段，并将隐藏字段的值设置为自动完成或选定的typehead事件的datum.id。

提交表单时，我只需检查隐藏字段是否有值，如果没有，则用户从未选择建议的选项。

我根据typeahead字段的名称为隐藏字段添加了一个_id来命名，然后在onAutocompleted和onSelected函数中使用了这段代码

我通过添加指定了这些功能

.on('typeahead:selected', onAutocompleted)
.on('typeahead:autocompleted', onSelected)

在将.typeahead功能添加到输入字段的代码中。

var n = $(this).attr('name')+'_id';
$('input[name="' + n + '"]').val(datum.id);

typeahead文档谈到有三个参数被传递给自动完成和选择的函数，即事件、数据和名称，但我从未看到名称被传递，这就是为什么我使用$(this).attr('name')机制来获取字段的名称。