微信小程序样式_JS+Ajax完成百度智能查找框

日期:2021-01-11 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

JS+Ajax实现百度智能搜索框       现在遇到这样的需求,要求输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值。下面小编给大家分享同js和ajax实现百度智能搜索框,需要的的朋友参考下实现代码

首先浏览实现后的结果,输入一个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. unction(){ 
 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 
 input type="text" id="keyword" 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; 
.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 strong xml version="1.0" encoding="UTF-8" 
 web-app xmlns:xsi="2001/XMLSchema-instance" xmlns="xml/ns/javaee" xsi:schemaLocation="xml/ns/javaee 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 
 welcome-file index.htm /welcome-file 
 welcome-file index.jsp /welcome-file 
  /welcome-file 
 welcome-file default.htm /welcome-file 
 welcome-file default.jsp /welcome-file 
 /welcome-file-list 
 /web-app /strong /span 

目录结构

总结

以上所述是小编给大家介绍的JS+Ajax实现百度智能搜索框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!