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

debugcn 发表于 Dev

格贝格罗

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

我尝试加入关闭事件，但似乎无法访问数据集进行验证。目前，我仅看到2种可能的解决方案：

钩住选定的和自动完成的事件，并将最后一个有效值存储在其他隐藏的文本框中，并根据这些值验证texbox。
或者使用其他的REST调用来验证针对服务器的输入（我试图防止这种情况）

有人有更好的解决方案吗？

马丁·库拉（Martin Currah）

我在寻找类似内容的同时找到了这篇文章。我正在尝试根据提供的预先输入的自动完成数据来确保用户具有有效的选择。这是我的代码。它适用于浏览器验证。

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函数上，您可以对照数据集检查是否存在匹配项，如果不匹配，则可以根据自己的喜好进行处理。例如清除文字框等

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。