搜索框智能提示ajax

最新推荐文章于 2021-08-05 21:58:01 发布

ifairstyle

最新推荐文章于 2021-08-05 21:58:01 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax基础实例文章标签：智能搜索提示 ajax实例异步

本文链接：https://blog.youkuaiyun.com/iFairStyle/article/details/54930008

ajax基础实例专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用AJAX实现的搜索建议功能。通过前端与后台的交互，能够实时展示与用户输入匹配的关键词建议，提高了用户体验。具体包括前端页面设计、AJAX请求处理及后台逻辑实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于ajax的搜索提示，如图所示，打下字母a弹出与之相关的关键词

设计思路是，从前台到后台。获得输入框的数据，采用ajax异步传输到后台，再用回调函数接收后台的反馈结果，再动态显示在前台页面

前台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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>智能提示搜索框</title>

<style type="text/css">

#searchDiv{
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-50px;
}

#content_table{
background-color: "#FFFAFA"
border:0px;
cellspacing:0px;
cellpaddding:0px;
}

.mouseover{
background-color: #708090;
color:#FFFAFA;
}
.mouseout{
background-color:#FFFAFA;
color:000;
}
</style>

<script type="text/javascript">

var xmlHttp;

function keywordBlur(){
clearContent();
}

function keywordFocus(){
getMoreContents();
}

//设置内容区域的显示格式
function setLocation(){
var content = document.getElementById("keyword");
var width = content.offsetWidth;//输入框的宽度
var left = content["offsetLeft"];//到左边框的距离
var top = content["offsetTop"]+content.offsetHeight;//到顶部的距离

//获得显示数据的div
var popDiv = document.getElementById("popDiv");
popDiv.style.border = 1+"px";
popDiv.style.left = left+"px";
popDiv.style.top = top+"px";
popDiv.style.width=width+"px";
document.getElementById("content_table").style.width=width+"px";
}
//获得用户输入内容的关联信息的函数
function getMoreContents(){
//获得用户输入内容
var content = document.getElementById("keyword");
if(content.value==""){
clearContent();
return;
}

//获得XmlHttp对象
xmlHttp = createXmlHttp();

//给服务器发送数据
var url = "SearchServlet?keyword="+escape(content.value);
xmlHttp.open("GET",url,true);

//xmlHttp绑定回调方法，这个回调方法会在XmlHttp状态改变的时候调用
//XmlHttp的状态0-4，我们只关心完成状态因为当数据完成之后再调用回调方法才有意义
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}

//创建XmlHttp对象
function createXmlHttp(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}

//考虑浏览器兼容性
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXObject("Msxml2.XNLHTTP");
}
}
return xmlHttp;
}

function callback(){
if(xmlHttp.readyState==4){
//200代表服务器响应成功
if(xmlHttp.status==200){
setLocation();
//交互成功。获得相应的数据，是文本格式
var result = xmlHttp.responseText;
//alert(result);
//解析获得的数据
var json = eval("("+result+")");
//获得数据之后展示数据
setContent(json);
}
}
}

//设置关联数据的显示
function setContent(contents){

clearContent();
var size = contents.length;
for(var i=0;i<size-1;i++){
var nextNode = contents[i];
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("border","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover = function(){
this.className = 'mouseover';
};
td.onmouseout = function(){
this.className = 'mouseout';
};
td.onclick = function(){

};
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}

function clearContent(){
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
}
</script>
</head>
<body>
<div id="searchDiv">
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="keywordFocus()"/>
<input type="button" value="百度一下" width="50px"/>


<div id="popDiv">
<table id="content_table">
<tbody id = "content_table_body">

</tbody>
</table>
</div>

</div>
</body>
</html>

简单后台代码

package com.imooc.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax");
datas.add("asafx");
datas.add("aasdfx");
datas.add("ajwerwax");
}
/**
* @see HttpServlet#HttpServlet()
*/
public SearchServlet() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String keyword = request.getParameter("keyword");
List<String> listData = getData(keyword);
System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}

public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for(String data:datas){
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}

}