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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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
杏林同学录(六)
2006/10/09 PHP
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
浅谈js闭包理解
2019/03/28 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python路径的写法及目录的获取方式
2019/12/26 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
考试没考好检讨书
2014/01/31 职场文书
大学生秋游活动方案
2014/02/17 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
排球赛新闻稿
2015/07/17 职场文书
大学生党课心得体会
2016/01/07 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis