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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
使用vue制作滑动标签
Sep 21 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php 无限极分类
2008/03/27 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
laravel自定义分页效果
2017/07/23 PHP
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python中的变量如何开辟内存
2018/06/26 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
python实现人脸签到系统
2020/04/13 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
遥感技术与仪器求职信
2014/02/22 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
秘书英文求职信
2014/04/16 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2015年成本会计工作总结
2015/10/14 职场文书