我正在使用以下jquery自动完成框及其正常工作
但问题是我想知道用户在文本框中输入的值 存在于我的dtasource列表中,假设
我提供给自动填充的数据源是
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
。
是否有一些可以帮助我的回调函数
...请帮助我,并提前致谢
答案 0 :(得分:2)
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没有必要,仅供未来读者使用)
我们遍历数组,定义要测试的regexp对象,进行条件化。如果它是真的,那么我们将检查是否存在包含validation text
的元素,如果存在,那么我们不会创建一个新的并替换div中的文本。如果语句在迭代器中至少一次为真,我们将退出该函数。这意味着,如果不删除return false;
和incrementing a variable
来计算匹配项,则无法展开此功能以查看有多少匹配项。
答案 1 :(得分:1)
自动填充功能不会执行输入验证。您可以使用http://docs.jquery.com/Plugins/Validation中的jquery-validate插件。然后,您可以创建一个自定义验证方法,以检查该值是否在availableTags数组中。
我的小提琴可以找到here。
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tag").autocomplete({
source: availableTags
});
$.validator.addMethod("validTag", function(value) {
return $.inArray(value, availableTags) >= 0;
});
$("#myform").validate({
rules: {
tag: {
validTag: true
}
},
messages: {
tag: "Please enter a valid tag"
}
});
});