js实现动态加载input 提示信息

2024-09-02 20:34:34

思路：使用<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

1.在网页加载的时候先把datalist选项值加载出来（一个数组），并且放置在一个全局变量中。

2.在输入框中输入信息的时候会触发响应函数。

html代码

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

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

js 代码：

<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>

最新文章

热门文章