我正在使用下面的 jquery 自动完成框并且它工作正常
但问题是我想知道用户在文本框中输入的值 是否存在于我的数据源列表中,假设
我提供给自动完成的数据源是
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
现在,如果用户输入 XYZ
并按提交按钮,那么我怎么知道 XYZ
是否存在于我的列表中。
是否有一些回调函数可以帮助我
...请帮助我并提前致谢
最佳答案
A working jsFiddle can be found here
$(function() {
$('#element').on('keyup', function(){
var _self = $(this);
var val = _self.val();
var patt = new RegExp(val, 'g');
$.each(availableTags, function(i,obj){
if(patt.test(obj) == true){
if(_self.parent().find('.inArray').length){
$('.inArray').removeClass('isNot').text('The value is in the array');
}else{
_self.after('<div class="inArray isIn"> The value is in the array.</div>');
}
//exit loop, matches are here.
return false;
}else{
if(_self.parent().find('.inArray').length){
$('.inArray').removeClass('isIn').text('The value is NOT in the array');
}else{
_self.after('<div class="inArray isNot"> The value is NOT in the array.</div>');
}
}
});
});
});
验证器元素的一些 CSS。
.inArray{
position:absolute;
top:0;
left:260px;
margin-left:10px;
}
.inArray.isIn{
color:green;
}
.inArray.isNot{
color:red;
}
(CSS不是必需的,只是为了将来的读者)
我们迭代数组,定义一个正则表达式对象来测试,创建一个条件。如果为真,那么我们将检查保存验证文本的元素是否存在,如果存在,则我们不会创建一个新元素并替换 div 中的文本。如果该语句在迭代器中至少一次为真,我们将退出该函数。这意味着如果不删除 return false;
和递增变量
来计算匹配项,您就无法扩展此函数来查看有多少匹配项。
关于javascript - 如何知道用户输入的值在jquery自动完成数据源中可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12634413/