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学习资源站点
Aug 29 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
vscode调试node.js的实现方法
Mar 22 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与paypal整合方法
2010/11/28 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
用Python写冒泡排序代码
2016/04/12 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
python实现任意位置文件分割的实例
2018/12/14 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python自带的IDE在哪里
2020/07/01 Python
python Gabor滤波器讲解
2020/10/26 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
美容院营销方案
2014/03/05 职场文书
法制宣传月活动总结
2014/04/29 职场文书
爱国主义电影观后感
2015/06/18 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android