JS实现输入信息自动匹配功能

最新推荐文章于 2023-08-28 15:08:31 发布
最新推荐文章于 2023-08-28 15:08:31 发布
阅读量5.9k 收藏 3
点赞数
文章标签： function stylesheet extjs input string iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lancefox/article/details/4312183
版权

      一个纯手工的模仿BAIDU和GOOGLE的输入信息自动匹配的功能封装，为了应付项目组的需要。本人基本上是不太会写JS，高人看了代码千万不要笑哦。但思路上对新手还是有些帮助的，我想是这样的。好了，废话不多说，看代码...

 

 

JSP代码（autoAdaptation.jsp）：页面效果可以通过访问此页来观察

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%-- 加载所需的JS控件等(这个common_tree当中还封装了一个EXTJS的树) --%>
<%@include file="/pages/commons/common_tree.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自动匹配DEMO</title>

</head>
<body>
 
<%-- 自动匹配显示控件 start  ：这段不是很干净，其实可以封装到JS中，但时间有限暂时先这样吧 --%> 
<iframe id="adaptionIFrame" class="adaptionIFrame" src="javascript:false;" scrolling="no" frameborder="0"
  style="position:absolute;overflow: auto;height:120px ">
</iframe>
<div id="adaptionDiv" class='adaptionDiv' style="position:absolute; overflow: visible;" >
 <div id="adaptionDiv_body" class="adaptionDiv_body" style="overflow: auto;" >
 </div>
 <div>
  <a href="#"  style="float: right;font-size: 9pt;">关闭</a>
 </div>
</div>
<%-- 自动匹配显示控件 end --%> 

<%--
要使用自动匹配的输入框
其中的style属性很重要，在adaption方法中会使用到其中的值。
--%>
输入1,a,b时均会看到自动匹配效果：

<input type="text" id="demo1" name="demo1" style="border:1px solid #000000;padding:1px; line-height:18px; width:150px;height:18px;" οnkeyup="adaption(this)"/>
<br>
<%--
在IE6中DIV的显示级别没有SELECT高，
直接加底色是挡不住这个SELECT控件的，
处理方法很简单，先用IFRAME遮住SELECT
再用DIV遮住IFRAME就行了。
--%>

校验自动匹配组件是否能够遮挡此控件：
<select>
 <option>1</option>
</select>

</body>
</html>

 

-----------------------------------------

主页

最低0.47元/天 解锁文章
lancefox
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS仿百度搜索自动提示框匹配查询功能
12-10
1. 添加动态加载css文件 不需要引入css css全部在JS动态生成。2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 “inputElem” 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置)，因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class “hiddenCls” 当然也支持自己配置参数。 如下代码： 代码如下:<div class=”parentCls”>        <div style=”width:200px;height:26px;border:1px solid #c
最全面的65条最常用正则表达式
Keep_Driving_XinYang的博客
02-14 955
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。 一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$
输入框输入内容匹配_自动匹配的输入 - 前台架构
weixin_39962889的博客
12-05 521
自动匹配，使用的场景提供查询过程通过输入的变化，第一时间完成响应，几乎可以达到实时的显示查询的结果，区别于选择框的方式，更加友好的提供查询功能。自动匹配自动匹配控件的支持，不仅仅通过固定的查询内容作为数据范围提供匹配的过程，而是通过输入内容的变化，通过接口完成请求，利用响应的结果进行显示，完成类似选择的效果来实现几乎实时的查询效果。所以，查询的方式可以分为两类，一是支持固定查询数据范围的自动匹配，...
JS 中几种常见的字符串匹配算法
最新发布
weixin_39273589的博客
08-28 2126
Rabin-Karp 算法使用了哈希函数来计算模式串和文本串的哈希值，然后在文本串上滑动模式串进行匹配。如果哈希值匹配，则进一步检查模式串和文本串是否完全匹配。这样可以减少字符串比较的次数，提高算法的效率。Rabin-Karp 算法的时间复杂度可以达到 O(n+m)，其中 n 是文本长度，m 是模式长度。
自动补全下拉框（可输入匹配的下拉框）
aibiba0894的博客
01-12 287
原文：http://davidhhs.iteye.com/blog/2268888 功能优化，增加级联查询功能（注：依赖Jquery.js，附有源代码，可以当作插件直接使用） 级联查询下拉框组调用代码： bindCascadeAutoSelect("selectId1", true, function(re1) { // re1 一级选项的值 $("#selectI...
js实现输入框输入的自动匹配功能
05-27
NULL 博文链接：https://weick.iteye.com/blog/603092
JavaScript实现邮箱地址自动匹配功能代码
11-29
自动匹配技术：简单的来说就是“根据用户输入的信息来提示一些相似项供用户选择”。具有很广泛的应用，比如我们最常用的百度，当输入一些搜索内容后会自动匹配很多相关信息；再比如我们最常用的输入法，都是使用这种...
基于javascript实现仿百度输入框自动匹配功能
11-22
本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码，现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你...
jQuery插件实现可输入和自动匹配的下拉框
12-29
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法： 1.直接使用h5的新标签，对应demo如下： <input list=browsers> 优点：节约js代码； 缺点：IE 9及以下的IE浏览器 和 Safari 均不支
JS实现仿百度输入框自动匹配功能的示例代码
12-10
现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你可以将提示的内容从数据库读取出来，要用到AJAX那东东。 代码如下:<...
js在编辑框input下根据输入内容显示匹配内容的下拉列表
01-27
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单： 将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题： input的onblur中隐藏下拉div div的onmouseup 将选择的li内容设置到input 鼠标从Input移到下拉div并点击其中一个li的过程： onmousemove => onblur => onmousedown => onmouseup 这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown 现在解决办法有两个： 方案1： 触发Onmousemove时获取当前鼠标位置 在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div 方案2： 在触发onmousemove时设置标志 在触发onblur时判断标志，如果标志没有设置则隐藏下拉div 若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏 若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器
js自动检索录入，类似百度输入自动匹配
11-01
一个用js做的类似百度输入时自动匹配相关信息的实例，简单易用！
js仿baidu google 实用的文本框内容自动完成效果
beer2008cn的专栏
11-17 1391
<br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>实用的文本框内容自动完成效果</title><br /><meta http-equiv="con
javascript正则
EmotionComputer
03-04 360
关于正则里详细内容请看我另一篇文章 传送门https://blog.csdn.net/yexudengzhidao/article/details/85453154 一. 使用 RegExp 对象 1. 使用 test() test() 方法是一个正则表达式方法。 test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。 2. ...
使用js正则控制input标签输入的值
构思昨天
07-27 2912
style="ime-mode:Disabled“ 这句是比较实用的。意为关闭输入法。省得有些人开着全角输入数字，结果输入不进去来找你哭天抹泪的，还怪你设计的不好。 只允许输入数字 只允许输入英文字母、数字和下划线(以下二种方法实现) 只允许输入英文字母、数字和&=@ 只允许输入汉字 实例：限制输入三位 只能是数字或者'.' 并在inpu
微信小程序仿手机淘宝新增地址自动识别地址，姓名，手机号
热门推荐
qq_22400315的博客
09-15 1万+
代码比较简单，直接上代码吧//自动识别事件 autoDiscern: function () { //省 var province = [“广东”, “北京”, “浙江”, “福建”, “湖北”, “上海”, “江苏”, “天津”, “河北”, “山西”, “内蒙古”, “辽宁”, “吉林”, “黑龙江”, “安徽”, “江西”, “山东”, “河南
前端下拉框能支持手动输入_下拉框（可输入+自动匹配）
weixin_39949506的博客
12-20 1052
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法：1.直接使用h5的新标签，对应demo如下：优点：节约js代码；缺点：IE 9及以下的IE浏览器 和 Safari 均不支持 标签(好像还有几个浏览器也不支持)；重复点击输入框或者下拉图标并不能收回下拉列表；样式难以控制2.使用基于jQuery的select2插件(需要同时引入select2.css和select2.js)，html部分代码...
使用前端传来的文字进行精确匹配
啊猿的博客
12-09 564
使用前端传来的文字进行精确匹配 /** * 使用前端传来的文字进行精确匹配，替换指定字符 */ @GetMapping("/findByWords") public void selectOneByText(HttpServletResponse response,String text) throws IOException{ //替换搜索内容中制定的字符串 if(text != null && !"".equals(t
Html5之datalist-自动匹配的的表单输入
sinat_32290679的博客
09-19 4678
datalist是Html5新增的标签，主要用于自动匹配表单的可能的输入datalist将用户可能输入的值，放在option列表里，当用户在对应的表单输入的时候，可以根据输入的关键字自动匹配option列表的内容，也可以输入option里不存在的值。用法如下<input list="browsers" name="browser">//表单的list属性指定对应datalist <datalist
jQuery实现输入邮箱地址自动提示
05-24
可以使用jQuery UI中的Autocomplete插件来实现输入邮箱地址自动提示。 以下是一个简单的示例代码： ```html <!DOCTYPE html> <title>Input email autocomplete ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值