js dynamic loading input message

Ideas: Use <datalist> tag define a list of options. Please input element used in conjunction with the elements, to define the possible values ​​input. datalist and its options will not be displayed, it is only legitimate input a list of values. Use the input list attribute of the element to bind datalist.

1. On the first page load time datalist option value load out (an array), and placed in a global variable.

2. When entering information in the input box triggers the response function.

html code

<input type="text"  placeholder="学校名" autocomplete="on" list="mylist" onkeyup="search(this)"/>

<datalist id="mylist"></datalist>

 

js code:

<script>
   var schoolList=["北京大学","清华大学","复旦大学","农业大学"];
    function search(obj){ 
        $("#mylist").empty();
        var tea_school=obj.value;
        for(i = 0; i < schoolList.length; ++i)
        {
            if(tea_school != "" && schoolList[i].match(tea_school + ".*") != null)
            {
                var option="<option>"+ schoolList[i] +"</option>";  
                $("#mylist").append(option);
            }
        }
    }
  </script>