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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
jquery 使用点滴函数代码
May 20 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
小程序自定义轮播图圆点组件
Jun 25 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安全配置方法
2007/06/16 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
如何在PHP中读写文件
2020/09/07 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python中模块string.py详解
2017/03/12 Python
Python之文字转图片方法
2018/05/10 Python
Python装饰器用法实例总结
2018/05/26 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python怎么判断模块安装完成
2020/06/19 Python
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
PHP如何自定义函数
2016/09/16 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
婚礼主持词开场白
2014/03/13 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
初级职称评定工作总结
2015/08/13 职场文书
python pyhs2 的安装操作
2021/04/07 Python