本文介绍了一种手工实现的JavaScript自动信息匹配功能，模仿了百度和谷歌的搜索建议。通过示例代码展示了如何在用户输入时动态加载匹配项，并提供了一个简单的JSP页面作为演示。核心逻辑在`autoAdaptation.js`文件中，利用EXTJS的AJAX功能进行数据请求，根据用户输入更新匹配列表。虽然代码简单，但对于新手理解自动匹配的实现思路有所帮助。
一个纯手工的模仿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元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
