思路:使用<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>

js实现动态加载input 提示信息的更多相关文章

  1. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  2. js的动态加载、缓存、更新以及复用(四)

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  3. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  4. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  5. js的动态加载、缓存、更新以及复用(二)

    上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...

  6. js的动态加载、缓存、更新以及复用(一)

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  7. js的动态加载、缓存、更新以及复用

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  8. js怎么动态加载js文件(JavaScript性能优化篇)

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  9. 篇一:js中动态加载---append

    之前是一行代码,不能动态加载,新的需求要动态加载,使用append $('#Order_information').append(' <div class="single_produc ...

随机推荐

  1. 20180805-Java ByteArrayInputStream类

    ByteArrayInputStream bArray = new ByteArrayInputStream(byte [] a); ByteArrayInputStream bArray = new ...

  2. Solr基本命令

    启动Solr 安装Solr后,进入到Solr主目录中的bin文件夹,并使用以下命令启动Solr. [Hadoop@localhost ~]$ cd [Hadoop@localhost ~]$ cd S ...

  3. P哥的桶(线段树+线性基)

    https://www.luogu.org/problem/P4839 题目: 有两个操作 1 a b  在a的位置添加b数值  (注意一个位置可以有多个值) 2 a b : 在 a到b的范围任取任意 ...

  4. Apache启动报错:Invalid command 'AuthType', perhaps misspelled or defined by a module not included in it

    在apache配置文件里面加了AuthType PFApacheAgent,,结果重启apache的时候歇菜了,,总是报上面的错, <Directory />AllowOverride n ...

  5. JSP中四种属性保存范围(1)

    一.四种属性范围 在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效request:在一次服务请求范围内,服务器跳转后依然有效session:-在一次会话范围内,无论何种跳 ...

  6. inclusion_tag 基本使用

    inclusion_tag的用途 inclusion_tag可以实现从后台往前端传递绑定数据的样式,一般用来动态显示模板页面中显示固定格式的数据. inclusion_tag的用法 step1: 编写 ...

  7. java虚拟机笔记-1

    java虚拟机学习笔记 Java技术的核心就是Java虚拟机,因为所有的Java程序都在虚拟机上运行.Java程序的运行需要Java虚拟机.Java API和Java Class文件的配合.Java虚 ...

  8. [暑假集训Day1T3]新的开始

    新建一个虚拟节点后直接跑最小生成树即可,从虚拟节点往每个节点连的边权为每个点建发电站的代价,许多人的考场贪心策略是:先构建原图的最小生成树后找一个花费最小的地方建发电厂.但是这样做不对的地方在于:如果 ...

  9. opencv2——直方图5

    (一)图像直方图 图像的构成是有像素点构成的,每个像素点的值代表着该点的颜色(灰度图或者彩色图).所谓直方图就是对图像的中的这些像素点的值进行统计,得到一个统一的整体的灰度概念.直方图的好处就在于可以 ...

  10. bzoj2396 神奇的矩阵(随机化)

    Time Limit: 5 Sec  Memory Limit: 512 MB 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立. 题目可能包含若干组数据.    对于每组数据,第一行 ...