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 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
javascript每日必学之继承
2016/02/23 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[05:05]第三天的dota2
2013/07/29 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 实现链表实例代码
2017/04/07 Python
python版本五子棋的实现代码
2018/12/11 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
保研推荐信
2014/05/09 职场文书
汽车专业求职信
2014/06/05 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
单位介绍信格式范文
2015/05/04 职场文书
团组织关系介绍信
2019/06/24 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
MySQL事务的隔离级别详情
2022/07/15 MySQL