JQUERY仿百度谷歌智慧提示
阿新 • • 發佈：2018-11-01
若使用jquery智慧提示，則主要使用Ajax動態呼叫後臺。
仿百度谷歌智慧提示，說實話，本篇部落格仿的不太縝密，有待繼續完善。
仿百度谷歌智慧提示，思路主要如下：
1.後臺根據前臺傳遞的引數進行匹配，提供資料列表。
2.前臺美觀智慧展示選擇資料列表
宣告：此篇部落格的後臺是假資料，沒有搭建資料庫進行匹配。
來一張目前功能截圖：
滑鼠控制：
選中之後：
思路：【重點前臺】
選中之後：
思路：【重點前臺】
- 監聽輸入框值變化，然後動態生成顯示列表【仿】
- 顯示列表中繫結各種事件（滑鼠移近、移除、單擊【仿】
- 文字框聚焦以及失焦狀態【仿】
- 文字框單擊狀態【仿】
- 文字框對方向鍵的控制【仿】
模擬訪問程式碼：package com.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class SearchServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml;charset=utf-8"); request.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); String key = request.getParameter("key"); System.out.println(key+"----------->"); StringBuilder results = new StringBuilder(); results.append("<results>"); results.append("<result key='a1' count='07' ></result>"); results.append("<result key='a2' count='11' ></result>"); results.append("<result key='a3' count='18' ></result>"); results.append("<result key='a4' count='19' ></result>"); results.append("<result key='a5' count='21' ></result>"); results.append("<result key='a6' count='31' ></result>"); results.append("<result key='a7' count='41' ></result>"); results.append("<result key='a8' count='51' ></result>"); results.append("</results>"); out.print(results.toString()); out.flush(); out.close(); } }
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AccessServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String jspkey=request.getParameter("key");
System.out.println("jsp..param..key..."+jspkey);
PrintWriter ps=response.getWriter();
ps.println("successful,you put the key is "+jspkey);
}
}
<%@ 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>Insert title here</title>
<style type="text/css">
#kw1 {
width: 529px;
height: 20px;
padding: 11px 7px 7px;
font: 16px arial;
border: 1px solid #b8b8b8;
outline: none
}
.btn {
width: 105px;
height: 40px;
padding: 0;
padding-top: 2px;
border: 0;
background-position: -464px -42px;
background-color: #e6e6e6;
cursor: pointer;
font-size: 16px
}
.showresult{
border: 1px solid #b8b8b8;
padding: 11px 7px 7px;
width: 529px;
margin-left:100px;
display:none;
font: 16px arial;
}
.showresultnew{
border: 1px solid #b8b8b8;
padding: 11px 7px 7px;
width: 529px;
margin-left:99.9px;
display:block;
font: 16px arial;
}
input::-ms-clear{display:none;}
</style>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
</head>
<script type="text/javascript">
var line = 0;
var oldvalue=$("#kw1").val();//保留最初的輸入值
$(function(){
// 38 上 40下 13 回車
$("#kw1").keydown(function(){
if(event.keyCode==13){
//若選擇的結果與最初輸入的結果一致則
//模糊匹配框收起來，是通過css樣式顯示隱藏控制，並且把顯示結果的div清空，每次都再重新建立
hideresult();
clearresult();
if($("#kw1").val()==""){
alert("warning,the key can't be empty");
return;
}
//隨意的查詢url，模擬百度或谷歌搜尋具體的東西
$.get("access",{key:$("#kw1").val()},function(responseinfo){
$("#responseinfo").html(responseinfo);
});
}else if(event.keyCode == 40){ //方向鍵下移
$("table tbody tr").eq(line)
.css("backgroundColor", "gray")
.css("color", "white"); //這是選中狀態、白字藍底
$("table tbody tr").eq(line < 0 ? 0 : line - 1)
.css("backgroundColor", "white")
.css("color", "black"); //非選中狀態、 黑字白底
if(line==$("table tbody tr").length){
$("#kw1").val(oldvalue);
line=0;
return; //若下移鍵移動到最後一個，那麼搜尋框中的值恢復成原來的輸入值，類似百度谷歌
//若下移鍵移動到最後一個，那麼把下次line值從頭再來，即line=0
//注意必須有個return，否則程式繼續前進，顯示結果有誤
}else{
line=line+1; //若下移鍵沒有移動到最後一個，那麼記錄下一個line值
}
$("#kw1").val($("table tbody tr").eq(line-1).find("td").eq(0).html());//搜尋框中值跟著下移鍵選擇而變化，類似百度谷歌
}else if(event.keyCode==38){ //方向鍵上移
if(line==0){ //若上移到第一個，那麼搜尋框中的值恢復到原來的輸入值，類似百度谷歌
$("table tbody tr").eq(line)
.css("backgroundColor", "white") //其實就是把已經選中的記錄恢復成非選中狀態，否則變成搜尋框值=原來值，但是第一條依然處於選中狀態
.css("color", "black");
$("#kw1").val(oldvalue);
line=$("table tbody tr").length; //若上移到第一個，那麼把下移line值變成table最後一個tr，即line=table tr .length
return;
}else{
line=line-1;
}
$("table tbody tr").eq(line)
.css("backgroundColor", "gray")
.css("color", "white"); //選中狀態
$("table tbody tr").eq(line > $("table tbody tr").length ? 0 : line + 1)
.css("backgroundColor", "white")
.css("color", "black"); //非選中狀態
$("#kw1").val($("table tbody tr").eq(line).find("td").eq(0).html());//搜尋框中值跟著下移鍵選擇而變化，類似百度谷歌
}
});
//確定搜尋、button事件
$("#su1").click(function(){
if($("#kw1").val()==""){
alert("warning,the key can't be empty");
return;
}
$.get("access",{key:$("#kw1").val()},function(responseinfo){
$("#responseinfo").html(responseinfo);
});
});
//不斷監聽文字框事件，注意：必須寫input，否則ie11不執行，以為propertychange不相容導致的
$("#kw1").bind("input propertychange", function(){
oldvalue=$("#kw1").val();
clearresult();
if($("#kw1").val()==""){
//模糊匹配框收起來
hideresult();
}else{
showresult();//顯示框
//動態生成table
dymictable();
}
});
//文字框失去焦點
$("#kw1").blur(function(){
//模糊匹配框收起來
hideresult();
clearresult();
});
//文字框focus事件
$("#kw1").focus(function(){
clearresult();
//若文字框沒有內容，則模糊匹配框收起來，否則顯示模糊匹配結果
if($("#kw1").val()==""){
//模糊匹配框收起來
hideresult();
}else{
//顯示模糊匹配框
showresult();
//動態生成table
dymictable();
}
});
//文字框點選事件，類似百度、谷歌
$("#kw1").click(function(){
clearresult();
//若文字框沒有內容，則模糊匹配框收起來，否則顯示模糊匹配結果
if($("#kw1").val()==""){
//模糊匹配框收起來
hideresult();
}else{
//顯示模糊匹配框
showresult();
//動態生成table
dymictable();
}
});
});
/**
* 清空div中顯示後臺結果的table，程式中每次都是重新建立生成的
*/
function clearresult(){
$("#showresult").html("");
line=0; //主要是用來控制方向鍵選擇記錄的
}
/**
* 通過css來隱藏查詢的結果，並且程式中每次都是重新建立生成查詢結果的
*/
function hideresult(){
$("#showresult").removeClass("showresultnew");
$("#showresult").addClass("showresult");
}
/**
* 通過css來顯示查詢的結果，並且程式中每次都是重新建立生成查詢結果的
*/
function showresult(){
$("#showresult").removeClass("showresult");
$("#showresult").addClass("showresultnew");
clearinfo();//清空介面返回提示資訊
}
/**
* 動態生成table,顯示結果
*/
function dymictable(){
var d_table=$("<table id='testtable' width='100%'</table>")//動態顯示結果
.attr("cellspacing","0");
$.get("testinstant.do",{key:$("#kw1").val()},function(xml){
$(xml).find("results result").each(function(){
var d_key=$(this).attr("key");
var d_count=$(this).attr("count");
var d_tr=$("<tr></tr>").css("cursor","pointer").mouseover(function(){
$(this).css("backgroundColor", "gray").css("color", "white");
}).mouseout(function(){
$(this).css("backgroundColor", "white").css("color", "black");
}).mousedown(function(){ //滑鼠選中，則銀行顯示框以及直接搜尋，類似百度谷歌
$("#kw1").val(d_key);
//收縮
hideresult();
clearresult();
//直接搜尋，類似百度谷歌
$.get("access",{key:$("#kw1").val()},function(responseinfo){
$("#responseinfo").html(responseinfo);
});
});
var d_td_key=$("<td></td>")
.attr("width","20%")
.attr("style","text-align:left")
.html(d_key);
var d_td_count=$("<td></td>")
.attr("width","80%")
.attr("style","text-align:right")
.html("查詢出個數："+d_count+"記錄");
d_tr.append(d_td_key);
d_tr.append(d_td_count);
d_table.append(d_tr);
$("#showresult").append(d_table);
});
});
}
/**
* clear response info
*/
function clearinfo(){
$("#responseinfo").html("");
}
</script>
<body>
自動搜尋框：
<input name="wd" id="kw1" type="text" maxlength="100" >
<input class="btn" id="su1" type="button" value="搜搜" ><span id="responseinfo"></span>
<div id="showresult" class="showresult">
</div>
</body>
</html>