Twitter Bootstrap Typeahead 强制选择

Question

我在我的应用程序中使用 Bootstrap Typeahead 插件，这是我的代码（这是一个示例）。 我正在寻找一种方法来验证用户的选择（基本上，如果输入与任何结果都不匹配 -> 清空模糊框）。结果必须匹配。我到处寻找，找不到任何东西。非常感谢您的帮助。

$('#search').typeahead({
    source: function (query, process) {
        var states = [];
        var map = {};

        var data = [
            { "stateCode": "CA", "stateName": "California" },
            { "stateCode": "AZ", "stateName": "Arizona" },
            { "stateCode": "NY", "stateName": "New York" },
            { "stateCode": "NV", "stateName": "Nevada" },
            { "stateCode": "OH", "stateName": "Ohio" }
        ];

        $.each(data, function (i, state) {
            map[state.stateName] = state;
            states.push(state.stateName);
        });

        process(states);
    }
});

Answer 1

mccannf 的解决方案有效，但在我的情况下，if(parents.indexOf($(this).val()) === -1) { 出现模糊事件。

Answer 2

如果您提取出数据、状态和地图，然后可以在.blur 函数中使用它们进行查找：

 var data = [
            { "stateCode": "CA", "stateName": "California" },
            { "stateCode": "AZ", "stateName": "Arizona" },
            { "stateCode": "NY", "stateName": "New York" },
            { "stateCode": "NV", "stateName": "Nevada" },
            { "stateCode": "OH", "stateName": "Ohio" }
        ];
 var states = [];
 var map = {};

 $.each(data, function (i, state) {
    map[state.stateName] = state;
    states.push(state.stateName);
 });

 $('#search').typeahead({
    source: function (query, process) {
        process(states);
    }
}).blur(function(){
    if(states[$(this).val()] == null) {
      $('#search').val('');
    }
});