Servlet+Ajax实现搜索框智能提示_技术问答

独孤问学

遗留问题没完成

已采纳 Dope_lin 的回答

原文遗漏包括一些小bug都已修复

2018-07-24 1回答·1261浏览

Sunny_Bear

有没有同学有这个课程的项目源码？: 已采纳 ______1________ 的回答; 不要过多指望源码。对着视频敲对学习更有帮助。这个视频这么详细。。。。; 2018-06-30 2回答·1292浏览

慕虎4040376

td的绑定onclick方法没有实现: 用onmousedown; 2018-04-25 1回答·1194浏览

慕田峪7268702

求jar包: 链接：http://pan.baidu.com/s/1boFIrbL 密码：q9vm; 2018-01-05 3回答·1211浏览

玖八

一些奇怪的问题: 在一台机器上是没有问题的，不涉及跨域，涉及跨域，需要后台加上允许跨域的 header; 2017-12-13 1回答·1178浏览

Mr___lu

设置下拉框时，在css直接设置td的样式可以吗: 直接使用css的标签选择器就可以实现; 2017-11-30 1回答·1300浏览

此昵称已用

请问兄弟们哪里有json数据的jar包: 已采纳的回答; 2017-10-15 1回答·777浏览

qq_小镇晨光_0

内容没讲完: 你的代码中实现了吗？怎么用td.onclick 方法不能实现也不报错; 2017-09-22 2回答·1058浏览

紫_羽

百度的搜索框功能不是还有一种，有关键盘事件的

课程下方有同学已经给出了实现

点击下面的提示列表，输入框的值就会成为列表中的值的实现方法。
//将关联内容显示在输入框中。而onmousedown执行顺序在input的onblur之前
//注意
//此处必须使用onmousedown 不能使用onclick
//onclick = onmousedown + onmouseup
//onclick点击之后input就会失去焦点，执行清除函数，清空关联内容，导致无法
td.onmousedown=function(){
document.getElementById("keyword").value = this.innerHTML;
};

2017-08-30 1回答·872浏览

Icclown

如果输入不是模拟数据比如是123 边框会出现: if(json!=''){ setContent(json) }; 2017-05-30 1回答·1012浏览

薄桜

最后想问一下关于代码的css问题: 这个问题我也没搞明白，我是来层经验的！嘿嘿，期待大神的回复; 2017-05-15 2回答·764浏览

白砂糖K

点击添加到搜索框也没有讲

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ajax</title>
    <style type="text/css">
    .mouseOver{
    	background: #708090;
    	color: #FFFAFA;
    }
    .mouseOut{
    	background: #FFFAFA;
    	color: #000000;
    }
   
    </style>
  
  <body>
  <div>
  
  
  	<div style="position:relative">
	    <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()">
	    <input type="button" value="百度">
  	</div>
  	<div id="popDiv" style="position:absolute">
  		<table id="content_table" bgcolor="#FFFAFA">
  			<tbody id="content_table_body">
  				
  			</tbody>
  		</table>
  	</div>
  	<div>aaaa</div>
  	</div>
  </body>
  <script type="text/javascript">
  	var xmlHttp;
	function getMoreContents(){
		var content=document.getElementById("keyword");
		if(content.value==""){
			clearContent();
			return;
		}
		xmlHttp=createXMLHttp();
		var url="search?keyword="+escape(content.value);
		xmlHttp.open("GET",url,true);
		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.XMLHTTP");
			}
		}
		return xmlHttp;
	}
	
	//回调函数
	function callback(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				var result=xmlHttp.responseText;
				var json=eval("("+result+")");
				setContent(json);
			}
		}
	}
	
	//设置关联数据的展示
	function setContent(contents){
		
		clearContent();
		setLocation();
		var size=contents.length;
		for(var i=0;i<size;i++){
			var nextNode=contents[i];
			var tr=document.createElement("tr");
			var td=document.createElement("td");
			td.setAttribute("border", "0");
			td.setAttribute("bgcolor", "#FFFAFA");
			td.setAttribute("id",i);
			td.onmouseover=function(){
				this.className='mouseOver';
			};
			td.onmouseout=function(){
				this.className='mouseOut';
			};
			td.onclick=function(){//点击获取td的值
				document.getElementById("keyword").value=this.innerHTML;
				clearContent();
			};
			var text=document.createTextNode(nextNode);
			td.appendChild(text);
			tr.appendChild(td);
			document.getElementById("content_table_body").appendChild(tr);
		}
	}
	
	//清空之前的数据
	function clearContent(){
		var contTableBody=document.getElementById("content_table_body");
		var size=contTableBody.childNodes.length;
		for(var i=size-1;i>=0;i--){
			contTableBody.removeChild(contTableBody.childNodes[i]);
		}
		document.getElementById("popDiv").style.border="none";
	}
	
	//失去焦点时
	function keywordBlur(){
		setTimeout("clearContent()",1000);//停一秒再清空，不然选择无效
	}
	
	//设置数据展示样式
	function setLocation(){
		var content=document.getElementById("keyword");
		var width=content.offsetWidth;
		var left=content["offsetLeft"];
		var top=content["offsetTop"]+content.offsetHeight;
		var popDiv=document.getElementById("popDiv");
		popDiv.style.border="black 1px solid";
		
		//popDive.style.left=left+"px";
		//popDiv.style.top=top+"px";
		popDiv.style.width=width+"px";
		document.getElementById("content_table").style.width=width+"px";
	}
  </script>
</html>

2017-05-10 2回答·971浏览

白砂糖K

展示数据还有问题

已采纳正在奔跑的少年的回答

给弹出的table加属性

position:relative;z-index:300;

z-index后面跟的数值是来控制优先级的。谁的数值大，谁在上面。只要保证弹出的table的z-index比搜索框下面，的元素的z-index大就可以。

同时，z-index属性，只有在position存在的情况下使用

2017-05-10 2回答·1333浏览

傻傻的人傻

还有一个问题想要请教

已采纳夜还没黑的回答

td.onmousedown=function(){

//当鼠标点击一个关联数据的时候,被选中的数据自动填充到输入框里面

document.getElementById("keyword").value=this.innerHTML;

//清除div边框

document.getElementById("popDiv").style.border="none";

}

2017-03-07 2回答·1235浏览

李兴杰

源码呢，，，，，: 代码老师已经全部敲了一遍，源码要不要都不重要了，如果记忆不深刻的话，最好跟着老师敲一遍，效果会更好！; 2017-02-08 1回答·773浏览

慕哥3122238

课程源代码: 在课程的右下角; 2017-02-08 1回答·784浏览

慕粉013049517

解决中文无法所搜: 2017-01-11 2回答·785浏览

慕侠1852468

搜索框列表

在每个td中增加一个onclick事件，比如onclick=clickValue(this)

javascript中：

function clickValue(tr){

var oInput = document.getElementById("输入框的ID值");//获得输入框对象

oInput.value = ""; //先将输入框的值清空

oInput.value = tr.innerHTML;

}

2016-12-27 1回答·886浏览

MyEmpress

输入中文时，如何正常显示: URLDecoder会报错啊; 2016-12-06 5回答·750浏览

慕前端9018328

求助，srevlet拿不到文本框值

用<form>表单的时候才设置<input>的name属性；
本课程中均使用javascript进行后台的交互，用的是url进行传值：

var url = "servlet/searchServlet?keyword=" + encodeURI(content.value);

不用对<input>进行设置，url中`?`后的`keyword=XX`就是传到后台的parameter和parameterValue；

3. 可以检查一下你的web.xml中servlet的url-pattern配置：

  <servlet-mapping>
    <servlet-name>searchServlet</servlet-name>
    <url-pattern>/servlet/searchServlet</url-pattern>
  </servlet-mapping>

看是否和url中的相同。

2016-11-26 2回答·1435浏览

慕粉3815961

搜索模拟数据的问题: 已采纳 JonSay 的回答; 显示中文的问题我是这样解决的,改成doPost请求,前台两次编码转换
var url = "search?keyword="+encodeURI(encodeURI(content.value));
后台也需要转换一次
// request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String keyword = request.getParameter("keyword");
keyword =URLDecoder.decode(keyword, "UTF-8");; 2016-11-23 2回答·982浏览

尼豪

还有一个功能没讲完

td.onmousedown = function(){
	             //当鼠标点击一个关联数据时，自动在输入框添加数据
				document.getElementById("keyword").value =this.innerText;
	        };

2016-10-28 3回答·998浏览