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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
js实现聊天对话框
Feb 08 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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页面缓存ob系列函数介绍
2012/10/18 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JS原型链怎么理解
2016/06/27 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
详解Python 切片语法
2019/06/10 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
中国梦演讲稿开场白
2014/08/28 职场文书
授权委托书公证
2014/09/14 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
小学教师年度个人总结
2015/02/05 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
物业工程部岗位职责
2015/02/11 职场文书
校车司机安全责任书
2015/05/11 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
中学后勤工作总结2015
2015/07/22 职场文书