如何知道用户输入的值可以在jquery自动完成数据源中使用

时间:2012-09-28 06:02:28

标签: javascript jquery jquery-ui jquery-autocomplete

我正在使用以下jquery自动完成框及其正常工作

JQuery Autocomplete

但问题是我想知道用户在文本框中输入的值   存在于我的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

是否有一些可以帮助我的回调函数

...请帮助我,并提前致谢

2 个答案:

答案 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来计算匹配项,则无法展开此功能以查看有多少匹配项。

A working jsFiddle can be found here

答案 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"
        }
    });
});​