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中出现乱码的处理心得
Dec 24 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
js获取内联样式的方法
Jan 27 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
jQuery实现带进度条的轮播图
2020/09/13 jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python2 与python3的print区别小结
2018/01/16 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python实现FM算法解析
2019/06/18 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
举起手来观后感
2015/06/09 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫