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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
微信小程序实现左右联动的实战记录
Jul 05 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 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
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中的多线程实例教程
2014/08/27 Python
python批量提交沙箱问题实例
2014/10/08 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python解析json代码实例解析
2019/11/25 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Django xadmin安装及使用详解
2020/10/26 Python
python调用win32接口进行截图的示例
2020/11/11 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
外贸采购员求职的自我评价
2013/11/26 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
工商干部先进事迹
2014/05/14 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
事业单位考察材料范文
2014/12/25 职场文书
高一作文之暖冬
2019/11/09 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏