Bootstrap Typeahead 仅允许列表值

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 中实现这一事实。但是可以找到垫片，例如：Best way to find if an item is in a JavaScript array?。

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 问题。将您的 validateSelecion 函数更改为：

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

按照 Samuel 指出的方式留下其余部分。

Answer 4

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

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

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

我根据预先输入字段的名称添加了一个_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') 机制来获取字段的名称。