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 event flow 的一个bug详解
Sep 17 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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.ini 中文版
2006/10/28 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
Python中bisect的用法
2014/09/23 Python
Python中几个比较常见的名词解释
2015/07/04 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python适合做数据挖掘吗
2020/06/16 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
医科大学毕业生自荐信
2014/02/03 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
融资租赁计划书
2014/04/29 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
士兵突击观后感
2015/06/16 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python