仅使用 typeahead.js 强制输入有效答案

【问题标题】：Force valid input only with typeahead.js仅使用 typeahead.js 强制输入有效
【发布时间】：2018-10-13 23:02:56
【问题描述】：

我有一些带有 twitters typeahead.js（不是旧的 bootstrap typeahead）的文本框，用于自动完成来自自定义 REST 服务的业务数据。如何强制文本框具有有效选择或根本没有文本？我想在提交之前验证表单，但我无法访问从服务器获得的预先输入的数据集。

我试图挂钩已关闭的事件，但似乎无法访问要验证的数据集。目前我只看到两种可能的解决方案：

挂钩到选定和自动完成的事件，并将最后一个有效值存储在附加的隐藏文本框中，并根据这些值验证文本框。
或者通过额外的休息调用（我试图阻止）验证服务器的输入

谁有更好的解决方案？

【问题讨论】：

标签： javascript validation user-interface typeahead.js

【解决方案1】：

我在自己搜索类似内容时发现了这篇文章。我试图确保用户根据提供的预先输入的自动完成数据进行有效选择。这是我的代码。它适用于浏览器验证。

var engine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: '/data/professions.json',
        filter: function(list) {
            return $.map(list, function(professions) { return { name: professions }; });
        }
    }
});

// kicks off the loading/processing of `local` and `prefetch`
engine.initialize();

$('#professionsTypeahead').typeahead(null, {
    name: 'professions',
    displayKey: 'name',
    source: engine.ttAdapter()
}).blur(function(){
    match = false
    for (var i = engine.index.datums.length - 1; i >= 0; i--) {
        if($(this).val() == engine.index.datums[i].name){
            match = true;
        }
    }; 
    if(!match){
        alert("Invalid Selection")
    }  
});

在 .blur 函数中，您可以检查数据集以查看是否有匹配项，如果没有，您可以随意处理它。比如清除文本框等

【讨论】：

【解决方案2】：

让它与第一个解决方案的派生一起工作。不是防弹的，但工作正常。欢迎使用替代品。

有关示例，请参阅此 jsfiddle：http://jsfiddle.net/gbegerow/HAw5V/7/

window.gbegerow.validValues = window.gbegerow.validValues || {};

function updateValues(el, item) {
   window.gbegerow.validValues[el.currentTarget.id] = item.value;
}

$('#inputCountries').typeahead({
    name: 'countries',
    local: ['Belgium', 'France', 'Germany','United Kingdom', 'United States']
}) .on('typeahead:selected', function(el, item) {
    updateValues(el, item);
})
.on('typeahead:autocompleted', function(el, item) {
    updateValues(el, item);
});

$('#validate').click(function(){
    for( id in window.gbegerow.validValues ) {
        var val =  window.gbegerow.validValues[id];
        var current = $('#'+id).val();
        var valid = val === current;

        if (!valid) { alert('invalid input: '+ id); }
    }
});

使用这个 html：

<input id="inputCountries" type="text" placeholder="Countries" />
<button id="validate">Validate</button>

【讨论】：

jsfiddle 坏了。软件包可能已过期。

【解决方案3】：

在寻找解决方案时偶然发现了它...使用较新的 typeahead 以这种方式使用它：

$('#professionsTypeahead').typeahead(null, {
    name: 'professions',
    displayKey: 'name',
    source: engine.ttAdapter()
}).blur(function(){
    match = false
    for (var i = Object.keys(engine.index.datums).length - 1; i >= 0; i--) {
       obj = jQuery.parseJSON(Object.keys(endine.index.datums)[i]);
       if($(this).val() == obj.name){
            match = true;
        }
    }; 
    if(!match){
        alert("Invalid Selection")
    }  
});

【讨论】：