自动完成技术，像百度一样通过AJAX技术来搜索备选项

最新推荐文章于 2021-08-06 08:31:35 发布

李世荣

最新推荐文章于 2021-08-06 08:31:35 发布

阅读量505

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/lishirong/article/details/41674329

版权

AJAX 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果截图：

自动完成技术，像百度一样通过AJAX技术来搜索备选项 - lishirong - The CTO of LiShirong

视频效果：

模拟了搜索中常用的提示功能，很值得研究。

静态提交页面：autoComplete.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>AJAX自动完成技术</title>

.mouseOut{

background:#708090;

color:#FFFAFA;

}

.mouseOver{

background:#FFFAFA;

color:#000000;

}

</style>

var xmlHttp;

var completeDiv;

var inputField;

var nameTable;

var nameTableBody;

function createXMLHttpRequest(){

if(window.ActiveXObject){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}

function initVars(){

inputField=document.getElementById("names");

nameTable=document.getElementById("name_table");

completeDiv=document.getElementById("popup");

nameTableBody=document.getElementById("name_table_body");

}

function findNames(){

initVars();

if(inputField.value.length>0){

createXMLHttpRequest();

var url="servlet/AutoCompleteServlet?names="+escape(inputField.value);

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=callback;

xmlHttp.send(null);

}else{

clearNames();

}

function callback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

var name=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;

setNames(xmlHttp.responseXML.getElementsByTagName("name"));

}else if(xmlHttp.status==204){

clearNames();

}

function setNames(the_names){

clearNames();

var size=the_names.length;

setOffsets();

var row,cell,txtNode;

for(var i=0;i<size;i++){

var nextNode=the_names[i].firstChild.data;

row=document.createElement("tr");

cell=document.createElement("td");

cell.οnmοuseοut=function(){this.className='mouseOver';};

cell.οnmοuseοver=function(){this.className='mouseOut';};

cell.setAttribute("bgcolor","#FFFAFA");

cell.setAttribute("border","0");

cell.οnclick=function(){populateName(this);};

txtNode=document.createTextNode(nextNode);

cell.appendChild(txtNode);

row.appendChild(cell);

nameTableBody.appendChild(row);

}

function setOffsets(){

var end=inputField.offsetWidth;

var left=calculateOffsetLeft(inputField);

var top=calculateOffsetTop(inputField)+inputField.offsetHeight;

completeDiv.style.border="black 1px solid";

completeDiv.style.left=left+"px";

completeDiv.style.top=top+"px";

nameTable.style.width=end+"px";

}

function calculateOffsetLeft(field){

return calculateOffset(field,"offsetLeft");

}

function calculateOffsetTop(field){

return calculateOffset(field,"offsetTop");

}

function calculateOffset(field,attr){

var offset=0;

while(field){

offset+=field[attr];

field=field.offsetParent;

}

return offset;

}

function populateName(cell){

inputField.value=cell.firstChild.nodeValue;

clearNames();

}

function clearNames(){

var ind=nameTableBody.childNodes.length;

for(var i=ind-1;i>=0;i--){

nameTableBody.removeChild(nameTableBody.childNodes[i]);

}

completeDiv.style.border="none";

}

</script>

</head>

<h1>Ajax 自动完成技术</h1>

请输入关键字：<input type="text" size="20" id="names" οnkeyup="findNames();" style="height:20;"/><input type="button" value="百度一下" onClick="alert('你还真以为这是百度啊？O(∩_∩)O~');"/>

</table>

</div>

</body>

</html>

处理的Servlet：AutoCompleteServlet.java

package servlet;

import java.io.*;

import java.util.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class AutoCompleteServlet extends HttpServlet{

private List names=new ArrayList();

public void init(ServletConfig config)throws ServletException{

names.add("li");

names.add("lishi");

names.add("lishirong");

names.add("lishirongand");

names.add("lishirongandRicky");

names.add("huang");

names.add("huangliang");

names.add("huangliangand");

names.add("huangliangandRicky");

names.add("huangliangandlishirong");

names.add("lishirongandcto");

}

protected void doGet(HttpServletRequest request,HttpServletResponse response)

throws IOException,ServletException{

String prefix=request.getParameter("names");

NameService service=NameService.getInstance(names);

List matching=service.findNames(prefix);

if(matching.size()>0){

PrintWriter out=response.getWriter();

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

out.println("<response>");

Iterator iter=matching.iterator();

while(iter.hasNext()){

String name=(String)iter.next();

out.println("<name>"+name+"</name>");

}

out.println("</response>");

matching=null;

service=null;

out.close();

}else{

response.setStatus(HttpServletResponse.SC_NO_CONTENT);

}

另外一个处理类：NameService.java

package servlet;

import java.util.*;

public class NameService {

private List names;

//Creates a new instance of NameService

private NameService(List list_of_names){

this.names=list_of_names;

}

public static NameService getInstance(List list_of_names){

return new NameService(list_of_names);

}

public List findNames(String prefix){

String prefix_upper=prefix.toUpperCase();

List matches=new ArrayList();

Iterator iter=names.iterator();

while(iter.hasNext()){

String name=(String)iter.next();

String name_upper_case=name.toUpperCase();

if(name_upper_case.startsWith(prefix_upper)){

boolean result=matches.add(name);

}

return matches;

}

李世荣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动完成技术，像百度一样通过AJAX技术来搜索备选项

效果截图：视频效果：模拟了搜索中常用的提示功能，很值得研究。静态提交页面：autoComplete.htmlAJAX自动完成技术 .mouseOut{ background:#708090; color:#FFFAFA; } .mouseOver{ background:#FFFAFA; color:#000000; } var xmlHttp; var completeDiv; v
复制链接

扫一扫