twitter-bootstrap Bootstrap Typeahead 仅允许列表值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13743498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Typeahead Only Allow List Values
提问by kcristella
Is it possible to limit a user's selection to the predefined data-source items for a Bootstrap Typeahead item? So if the user types something that is not in the data-source, a message is be displayed notifying them as such?
是否可以将用户的选择限制为 Bootstrap Typeahead 项目的预定义数据源项目？因此，如果用户键入数据源中没有的内容，则会显示一条消息通知他们？
Here's the demo: http://cruiseoutlook.com/test
这是演示：http: //cruiseoutlook.com/test
回答by Samuel Caillerie
If I understand, when the typeahead component loses the focus, the user should be alerted that its input is invalid if it is not in the list?
如果我理解，当 typeahead 组件失去焦点时，如果它不在列表中，应该提醒用户它的输入无效？
The code will thus be something like this :
因此，代码将是这样的：
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!');
}
Just be careful about the fact that indexOfis not implemented in IE6-8. But shims can be found, for example : Best way to find if an item is in a JavaScript array?.
请注意indexOf在 IE6-8 中未实现的事实。但是可以找到垫片，例如：查找项目是否在 JavaScript 数组中的最佳方法？.
回答by Chad Scira
I ran into the same issue but in my situation all my my data was remote. Bloodhound doesn't really have any good hooks that i am currently aware of that lets you do this, but you can hook into the ajax complete callback and manually build up a valid input cache, and then check against that on change/blur.
我遇到了同样的问题，但在我的情况下，我的所有数据都是远程的。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('');
}
});
回答by jheyse
Using jquery and Samuel's solution I think you will overcome the IE problem. Change your validateSelecion function to:
使用 jquery 和 Samuel 的解决方案，我认为您将克服 IE 问题。将您的 validateSelecion 函数更改为：
function validateSelection() {
if ($.inArray($(this).val(), myData) === -1)
alert('Error : element not in list!');
}
Leave the rest as Samuel pointed out.
剩下的就如塞缪尔所指出的那样。
回答by user1279887
I solved this problem a little differently - most of the time you need to capture the id of the suggested options, to post to a subsequent web service call, etc.
我以稍微不同的方式解决了这个问题 - 大多数情况下，您需要捕获建议选项的 id，发布到后续的 Web 服务调用等。
I decided to blank out a hidden field when the typeahead async call starts, and set the value of the hidden field to the datum.id on the autocompleted or selected typehead events.
我决定在 typeahead 异步调用开始时清空一个隐藏字段，并将隐藏字段的值设置为自动完成或选择的 typehead 事件上的 datum.id。
When submitting the form, I simply check if the hidden field has a value or not, if it doesn't, then the user never selected a suggested option.
提交表单时，我只是检查隐藏字段是否有值，如果没有，则用户永远不会选择建议的选项。
I named the hidden field by adding a _id to it based on the name of the typeahead field, and then used this code in the onAutocompleted and onSelected functions
我根据 typeahead 字段的名称通过向隐藏字段添加 _id 来命名隐藏字段，然后在 onAutocompleted 和 onSelected 函数中使用此代码
I specified those functions by adding:
我通过添加以下功能来指定这些功能：
.on('typeahead:selected', onAutocompleted)
.on('typeahead:autocompleted', onSelected)
in the code that adds the .typeahead functionality to the input field.
在将 .typeahead 功能添加到输入字段的代码中。
var n = $(this).attr('name')+'_id';
$('input[name="' + n + '"]').val(datum.id);
The typeahead documentation talks about there being three parameters that are passed to the autocompleted and selected functions, the event, the datum, and the name, but I never saw the name being passed, and that's why I used the $(this).attr('name') mechanism to get the name of the field.
typeahead 文档谈到有三个参数传递给自动完成和选定的函数，事件、数据和名称，但我从未看到传递的名称，这就是我使用 $(this).attr 的原因('name') 获取字段名称的机制。
