javascript input输入框模糊提示功能的实现
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="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://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>
效果:
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
JS表单提交验证、input(type=number) 去三角 刷新验证码
在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑:注意点: 1.只有通过form里面的 <button type="submit" >提交</button>进行表单的提交才会触发form的onSubmit事件,如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件 2. onSubmit事件的正确写法是:<form action="
-
JS中input表单隐藏域及其使用方法
一.表单隐藏域 隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式: <input type="hidden" name="..." value="..."> 属性解释: type="hidden"定义隐藏域: name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称: value属
-
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o
-
js监听input输入框值的实时变化实例
1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo
-
JS获得多个同name 的input输入框的值的实现方法
先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu
-
JS验证input输入框(字母,数字,符号,中文)
只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r
-
对于input 框限定输入值为浮点型的js代码
在一些项目中,比如金额用到浮点型,对于input 限定可以参考以下 <input type="text" value="" onkeyup="only_num(this)" onblur="only_num(this)"> <script> function only_num(obj){ //得到第一个字符是否为负号 var num = obj.value.charAt(0); //先把非数字的都替换
-
javascript input输入框模糊提示功能的实现
javascript input输入框模糊提示功能的实现 主要用到了jQuery.autocomplete函数,定义好一个数组就可以用这个功能了,很方便. <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothne
-
javascript实现输入框内容提示及隐藏功能
有时输入框较小,希望输入内容后,出现一个有放大输入内容的提示框 实现思路 页面上先编写出提示框,然后将提示框的css属性:display设置成none,隐藏起来 获取输入框元素对象.信息提示框元素对象 为输入框元素对象绑定键盘事件- - -keyup, 事件处理程序:判断输入的内容是否为空,不为空- - -将输入框的内容赋值给信息提示框,并设置信息提示框显示:display设置成block:为空,设置提示框不显示 添加获取焦点和失去焦点事件. blur- - -失去焦点:鼠标不选中输入框,输入框
-
vue实现Input输入框模糊查询方法
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search
-
JavaScript实现邮箱后缀提示功能的示例代码
先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀进行显示 暂时不用考虑示意图中的红色和蓝色背景色的逻辑 注意用户输入中前后空格需要去除 小优化编码 需求 如果我们输入的是 abc@1,这个时候出现的提示框内容是 abc@1@163.com abc@1@gmail.com abc@1@126.com -- 很明显,上面的提示框不是一个符合用户需求的
-
vue input输入框模糊查询的示例代码
Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo
-
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(
-
基于javascript实现仿百度输入框自动匹配功能
本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd
-
js输入框邮箱自动提示功能代码实现
同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls"> <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父
-
input 标签实现输入框带提示文字效果(两种方法)
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5
-
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能.分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的.最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下: 1. 在输入框中 如果没有内容,则显示提示:比如"请输入用户名" 2. 如果输入框获得焦点,则隐藏提示 3.
随机推荐
- spring boot中的properties参数配置详解
- Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
- Spring 4.0新功能:@Conditional注解详细介绍
- JS当前属性查询实现代码
- 基于JS实现省市联动效果代码分享
- php设置编码格式的方法
- 解析php中如何调用用户自定义函数
- php计算多维数组中所有值总和的方法
- PHP文件系统管理(实例讲解)
- PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
- 如何运用docker配合python开发环境实例
- MYSQL神秘的HANDLER命令与实现方法
- javascript实现带节日和农历的日历特效
- Jqprint实现页面打印
- javascript渐变显示的雅虎中国选项卡效果代码
- java中关于Map的三种遍历方法详解
- Ubuntu Server 11.10安装配置lamp(Apache+MySQL+PHP)
- 为你总结一些php信息函数
- Android模拟强制下线通知功能实例代码
- window版 IntelliJ IDEA 快捷键图文教程