Bootstrap Typeahead仅允许列表值

时间:2012-12-06 12:18:36

标签: javascript jquery twitter-bootstrap

是否可以将用户的选择限制为Bootstrap Typeahead项目的预定义数据源项?因此,如果用户键入了不在数据源中的内容,则会显示一条消息,通知他们这样做?

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

4 个答案:

答案 0 :(得分:17)

如果我理解,当先行模式组件失去焦点时,如果该输入不在列表中,则应提示用户输入无效?

因此代码将是这样的:

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!');
}

请注意IE6-8中未实现indexOf的事实。但是可以找到垫片,例如:Best way to find if an item is in a JavaScript array?

答案 1 :(得分:6)

我遇到了同样的问题,但在我的情况下,我的所有数据都是远程。 Bloodhound实际上没有任何好的钩子,我现在知道这可以让你这样做,但你可以挂钩到ajax完整回调并手动建立一个有效的输入缓存,然后检查更改/模糊。< / p>

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('');
    }
});

答案 2 :(得分:4)

使用jquery和Samuel的解决方案我认为你将克服IE问题。将validateSelecion函数更改为:

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

Samuel指出,剩下的就剩下了。

答案 3 :(得分:0)

我解决了这个问题的方式略有不同 - 大部分时间你需要捕获建议选项的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文档说明有三个参数传递给自动完成和选定的函数,事件,数据和名称,但是我从未看到过传递的名称,这就是为什么我使用$(这个).attr('name')机制来获取字段的名称。