JS+Ajax实现百度智能搜索框
程序员文章站
2022-11-25 13:07:07
首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax+js。
前端search.j...
首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax+js。
前端search.jsp
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<html>
<head>
<title>insert title here</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
li{
margin:0;
height: 20px;
width: 200px;
list-style: none;
}
/* #c li:hover{
background-color: #f9f9f9;
} */
.onmouse{
background-color: #f9f9f9;
}
.outmouse{
background-color:white;
}
#contain{
width: 50%;
}
</style>
<!-- jquery -->
<script type="text/javascript">
var xmlhttp;
function getmorecontents() {
var content=document.getelementbyid("keyword");
if(content.value==""){
clearcontent();
return;//如果不设置，传到后台的是空值，所有的值都会被输出
}
xmlhttp=creatxmlhttp();
//alert(xmlhttp);
//要给服务器发送数据
var url="searchservlet?keyword="+escape(content.value);
xmlhttp.open("get",url,true);
xmlhttp.onreadystatechange=callback;
xmlhttp.send(null);
}
//获取xmlhttp对象
function creatxmlhttp() {
var xmlhttp;
if(window.xmlhttprequest){
xmlhttp=new xmlhttprequest();
}
if(window.activexobject)
{
xmlhttp=new activexobject("microsoft.xmlhttp");
if(!xmlhttp){
xmlhttp=new activexoject("msxml2.xmlhttp");
}
}
return xmlhttp;
} //获取xmlhttp对象
function callback() {
if(xmlhttp.readystate==4 && xmlhttp.status==200){
var result=xmlhttp.responsetext;
//解析数据
var json=eval("("+result+")");
//动态显示数据，线束数据在输入框对的下面
setcontent(json);
}
}
//设置关联数据的展示
function setcontent(contents) {
clearcontent();
var size=contents.length;
for(var i=0;i<size;i++)
{
var nextnode=contents[i];//json格式的第i个数据
var li =document.createelement("li");
li.onmouseover=function(){
this.classname="onmouse";
document.getelementbyid("keyword").value=this.innerhtml;
}
li.onmouseout=function(){
this.classname="outmouse";
}
var text=document.createtextnode(nextnode);
li.appendchild(text);
document.getelementbyid("c").appendchild(li);
}
}
//清空数据
function clearcontent() {
document.getelementbyid("c").innerhtml="";
}
//当控件失去焦点时，清空数据
function outfouce() {
clearcontent();
}
//获得焦点时，
</script>
</head>
<body>
<div id="contain">
<div style="height: 20px;">
<input type="text" id="keyword" style="size:50px;" onkeyup="getmorecontents()" onblur="outfouce()" onfocus="getmorecontents()">
<input type="button" id="bu" value="百度一下" style="">
</div>
<div id="popdiv">
<ul id="c">
<li></li>
</ul>
</div>
</div>
</body>
</html>
后台searchservlet.java
package search;
import java.io.ioexception;
import java.util.arraylist;
import java.util.list;
import net.sf.json.jsonarray;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
/**
* servlet implementation class searchservlet
*/
@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("bjax");
datas.add("ajaxfd");
datas.add("bfvd");
datas.add("dafdx");
datas.add("fdax");
datas.add("ahg");
datas.add("ddx");
}
/**
* @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 {
// todo auto-generated method stub
dopost(request, response);
}
/**
* @see httpservlet#dopost(httpservletrequest request, httpservletresponse response)
*/
protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
// todo auto-generated method stub
request.setcharacterencoding("utf-8");
response.setcharacterencoding("utf-8");
string keyword=request.getparameter("keyword");
//system.out.println(keyword);
list<string> listdata= getdata(keyword);
// 返回json,以流的形式写到前台
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;
}
}
xml配置
<span style="font-size:18px;"><strong><?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemalocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="webapp_id" version="3.1"> <servlet> <servlet-name>searchservlet</servlet-name> <servlet-class>search.searchservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>searchservlet</servlet-name> <url-pattern>/search/searchservlet</url-pattern> </servlet-mapping> <display-name>dropmeum</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app></strong></span>
目录结构
总结
以上所述是小编给大家介绍的js+ajax实现百度智能搜索框，希望对大家有所帮助
上一篇： 深入浅析Vue不同场景下组件间的数据交流
下一篇： 详解如何构建Angular项目目录结构