如何知道用戶輸入的值在jquery自動完成數據源中可用

Question

我正在使用以下jQuery自動完成框，並且工作正常

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是否出現在我的列表中。

是否有一些回調函數可以幫助我

...請幫助我，在此先感謝

Answer 1

可以在這里找到有效的jsFiddle

$(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來計算匹配項。

可以在這里找到有效的jsFiddle

Answer 2

自動完成功能不會執行輸入驗證。 您可以使用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"
        }
    });
});​