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中的typeof和instanceof介绍
Dec 04 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 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 header()函数使用说明
2008/07/10 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
使用js画图之正弦曲线
2015/01/12 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python爬取内容存入Excel实例
2019/02/20 Python
opencv实现简单人脸识别
2021/02/19 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
用python对oracle进行简单性能测试
2020/12/05 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
政府信息公开实施方案
2014/05/09 职场文书
课例研修方案
2014/05/31 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL