js实现动态加载input 提示信息
思路:使用<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 提示信息的更多相关文章
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- js的动态加载、缓存、更新以及复用(四)
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- Ext JS 如何动态加载JavaScript创建窗体
JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...
- js的动态加载、缓存、更新以及复用(二)
上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...
- js的动态加载、缓存、更新以及复用(一)
使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...
- js的动态加载、缓存、更新以及复用
使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...
- js怎么动态加载js文件(JavaScript性能优化篇)
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...
- 篇一:js中动态加载---append
之前是一行代码,不能动态加载,新的需求要动态加载,使用append $('#Order_information').append(' <div class="single_produc ...
随机推荐
- [CF1056E]Check Transcription
题目:Check Transcription 传送门:http://codeforces.com/contest/1056/problem/E 分析: 1)显然有个$O( \frac{t}{max(c ...
- 图论 List
题目 #A 小 K 的农场 (Unaccepted) #B 信息传递 (Unaccepted) #C 最短路计数 (Accepted) #D 通往奥格瑞玛的道路 (Accepted) ...
- [CSP-S模拟测试]:甜圈(线段树)
题目描述 $D$先生,是一个了不起的甜甜圈制造商.今天,他的厨房准备在日出之前制作甜甜圈.$D$先生瞬间完成了$N$个油炸圈饼.但是,这些油炸圈饼得先经过各种装饰任务才可以成为甜甜圈销售:填充奶油,浸 ...
- 腾讯云服务器centos通过yum安装mysql数据库
安装mysql有两种: 1-可以使用yum安装, 2-可以自己下载安装包安装mysql, 腾讯云的centos系统自带了yum,所以用yum安装方便点 安装步骤 1-查看yum源中是否有mysql y ...
- iOS打印各种类型数据
整型占位符说明 : %d : 十进制整数, 正数无符号, 负数有 “-” 符号; %o : 八进制无符号整数, 没有 0 前缀; %x : 十六进制无符号整数, 没有 0x 前缀; %u : 十进制无 ...
- 2017数据科学报告:机器学习工程师年薪最高,Python最常用
2017数据科学报告:机器学习工程师年薪最高,Python最常用 2017-11-03 11:05 数据平台 Kaggle 近日发布了2017 机器学习及数据科学调查报告,针对最受欢迎的编程语言.不同 ...
- Malformed UTF-8 characters, possibly incorrectly encoded 或中文乱码 (Uncaught InvalidArgumentException: Malformed UTF-8 characters, possibly incorrectly encoded in)
问题: Uncaught InvalidArgumentException: Malformed UTF-8 characters, possibly incorrectly encoded in 是 ...
- 思维导图初体验——openstack
RABBITMQ memcache keystone glance nova neutron horizon cinder ceph
- Linux 命令详解 - ps
完整文档 ps 命令用于显示命令执行瞬间的进程状态(Process Status).如果想动态查看进程状态可以使用 top 命令. 进程的概念 进程类型 前台进程:由终端初始化,可以通过命令行进行交互 ...
- c#处理json格式类型的字符串
string channelGroup=[{"SpType":"1","BaseInfoId":["xxx"," ...