How to know that the value which user entered is avaible in jquery autocomplete datasource

Question

i am using the following jquery autocomplete box and its working fine

JQuery Autocomplete

but the the problem is that i want to know that the value which user entered in text box exists in my dtasource list or not , Suppose

my data source which i provided to autocomplete is

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

now if user enter XYZ and press submit button then how could i know that XYZ is present in my list or not .

Is there some callback functions which can help me

... Please help me and thanks in advance

Answer 1

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>');

                }

            }
        });
    });
});

A little CSS for the validator element.

.inArray{
    position:absolute;
    top:0;
    left:260px;
    margin-left:10px;    
  }

  .inArray.isIn{
     color:green;   
  }

  .inArray.isNot{
      color:red;   
  }

(The css is not necessary, just here for future readers)

We iterate over the array, define a regexp object to test with, make a conditional. if it's true, then we'll check to see if the element that holds the validation text exists or not, if it does then we don't make a new one and replace the text in the div. If the statement is true within the iterator at least once, we'll exit the function. This means you can't expand on this function to see how many matches there were without removing the return false; and incrementing a variable to count the matches.

A working jsFiddle can be found here

Answer 2

Autocomplete doesn't perform input validation. You could use the jquery-validate plugin from http://docs.jquery.com/Plugins/Validation . You can then create a custom validation method that checks whether the value is in the availableTags array.

My fiddle can be found 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"
        }
    });
});​