[英]How to know that the value which user entered is avaible in jquery autocomplete datasource
我正在使用以下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
并按Submit按钮,那么我怎么知道XYZ
是否出现在我的列表中。
是否有一些回调函数可以帮助我
...请帮助我,在此先感谢
$(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,仅在此处供将来的读者使用)
我们遍历数组,定义一个正则表达式对象进行测试,并使其成为条件。 如果是真的,那么我们将检查包含validation text
的元素是否存在,如果存在,那么我们不制作新的元素并替换div中的文本。 如果该语句在迭代器中至少为true,则将退出该函数。 这意味着您不能在不删除return false;
情况下扩展此函数以查看有多少匹配项return false;
并incrementing a variable
来计算匹配项。
自动完成功能不会执行输入验证。 您可以使用http://docs.jquery.com/Plugins/Validation中的jquery-validate插件。 然后,您可以创建一个自定义验证方法,以检查该值是否在availableTags数组中。
我的小提琴可以在这里找到。
$(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"
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.