javascript input输入框模糊提示功能的实现


Posted in Javascript onSeptember 25, 2017

javascript input输入框模糊提示功能的实现

主要用到了jQuery.autocomplete函数,定义好一个数组就可以用这个功能了,很方便。

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script>
 $(function() {
  var availableTags = [
   "James",
   "Kobe",
   "Jordan"
  ];
  $( "#tags" ).autocomplete({
   source: availableTags
  });
 });
 </script>
</head>
<body>

<div class="ui-widget">
 <label for="tags">Tags: </label>
 <input id="tags">
</div>

</body>

效果:

javascript input输入框模糊提示功能的实现

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
js取模(求余数)隔行变色
May 15 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
vue-cli中的webpack配置详解
Sep 25 #Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 #Javascript
react native与webview通信的示例代码
Sep 25 #Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 #Javascript
vuex中使用对象展开运算符的示例
Sep 25 #Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 #Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP5.3新特性小结
2016/02/14 PHP
基于php编程规范(详解)
2017/08/17 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
jquery随机展示头像代码
2011/12/21 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
使用ECharts实现状态区间图
2018/10/25 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
python求质数列表的例子
2019/11/24 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
合伙经营协议书范本
2014/09/13 职场文书
导游词开场白
2015/01/31 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
病假条格式范文
2015/08/17 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
分享一些Java的常用工具
2021/06/11 Java/Android
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android