简单的搜索输入框提示功能jsp+ajax

最新推荐文章于 2022-03-29 20:57:10 发布

as5005005

最新推荐文章于 2022-03-29 20:57:10 发布

阅读量619

点赞数

分类专栏：技术总结文章标签： JSP Ajax MySQL SQL IE

技术总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

首先整体的思路是：HTML端由一个input和div组成，div的隐藏和显示实现下拉框提示，input的字符输入动作触发js的函数，通过ajax来与jsp通信，获得模糊查询结果，返回前台来显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta content="text/html" charset="GBK" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script type="text/javascript">
// ajax.js

var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;
//创建XMLHttpRequest对象      
function createXMLHttpRequest() { 
var o//=============
      if(window.XMLHttpRequest) { //Mozilla 浏览器 
              o = new XMLHttpRequest(); 
      } 
      else if (window.ActiveXObject) { // IE浏览器 
              try { 
                    o = new ActiveXObject("Msxml2.XMLHTTP"); 
              } catch(e){ 
                    try{ 
                          o = new ActiveXObject("Microsoft.XMLHTTP"); 
                    } catch (e) {} 
              } 
      } 
return o;//=============
} 
function findNames() { 
      inputField = document.getElementById("names");          
      completeTable = document.getElementById("complete_table"); 
      completeDiv = document.getElementById("popup"); 
      completeBody = document.getElementById("complete_body"); 
      if (inputField.value.length > 0) { 
            var o=createXMLHttpRequest();          
            var url = "http://192.168.1.101/OAapp/jsp/index.jsp?names=" + escape(inputField.value);
//此处escape函数可以去掉，escape是采用ISO Latin字符集对指定的字符串进行编码。 
            o.open("GET", url, true); 
            o.onreadystatechange = function(){
     if (o.readyState == 4) { // 判断对象状态
          if (o.status == 200) { // 信息已经成功返回，开始处理信息 
				  setNames(o.responseXML.getElementsByTagName("res"));
          }else { //页面不正常 
              window.alert("您所请求的页面有异常。"); 
          } 
      } 

};//指定响应函数 
            o.send(null); // 发送请求 
      } else { 
            clearNames(); 
      } 
} 

// 处理返回匹配信息函数
function processMatchResponse() { 
      if (XMLHttpReq.readyState == 4) { // 判断对象状态
          if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息 
                  alert("XMLHttpReq.responseText");   //输出看是否有乱码===============
                  setNames(XMLHttpReq.responseXML.getElementsByTagName("res")); 
          }else { //页面不正常 
              window.alert("您所请求的页面有异常。"); 
          } 
      } 
} 

//生成与输入内容匹配行
function setNames(names) {           
      clearNames();
      var size = names.length;
      setOffsets();
      var row, cell, txtNode;
      for (var i = 0; i < size; i++) {
          var nextNode = names[i].firstChild.data;
          row = document.createElement("tr");
          cell = document.createElement("td");    
          cell.onmouseout = function() {
              this.className='mouseOver';
          };
          cell.onmouseover = function() {
              this.className='mouseOut';
          };
          cell.setAttribute("bgcolor", "#ffddcc");
          cell.setAttribute("border", "0");
          cell.setAttribute("width",inputField.offsetWidth+"px");
          cell.onclick = function() {
              completeField(this);
          } ;
          txtNode = document.createTextNode(nextNode);
          cell.appendChild(txtNode);
          row.appendChild(cell);
          completeBody.appendChild(row);
      }
}

//设置显示位置                
function setOffsets() {
      completeTable.style.width = "auto";    //显示自动完成的提示框宽度自动伸展或缩小
	  gettable(inputField);
}
//取绝对位置
function getAbsPosition(obj) {
    var r = {
        left: obj.offsetLeft,
        top : obj.offsetTop
    };
    r.left = obj.offsetLeft;
    r.top  = obj.offsetTop;
    if(obj.offsetParent) {
        var tmp = getAbsPosition(obj.offsetParent);
        r.left += tmp.left;
        r.top  += tmp.top;
    }
    return r;
  }
  //为提示定位
function gettable(obj) {
    var pos = getAbsPosition(obj);
    pos.top += obj.offsetHeight;
    completeDiv.style.top = pos.top + "px";
    completeDiv.style.left = pos.left + "px";
    completeDiv.style.width = obj.offsetWidth + "px";
    completeDiv.style.visibility = '';
  }

//计算显示位置
function calculateOffset(field, attr) {
      var offset = 0;
      while(field) {
          offset += field[attr];
          field = field.offsetParent;
      }
      return offset;
}

//填写输入框
function completeField(cell) {
      inputField.value = cell.firstChild.nodeValue;
      clearNames();
}

//清除自动完成行
function clearNames() {
      var ind = completeBody.childNodes.length;
      for (var i = ind - 1; i >= 0 ; i--) {
          completeBody.removeChild(completeBody.childNodes[i]);
      }
      completeDiv.style.border = "none";
}
</script>
<input type="text" id="names" onkeyup="findNames();" size="20">

<div id="popup" border="0" style="z-index:99;visibility:hidden;position:absolute;border:1px solid black;">
      <table id="complete_table" border="0" cellspacing="0" cellpadding="0" style="background-color: #cceeff;">
          <tbody id="complete_body"></tbody>
      </table>
</div>
</BODY>
</HTML>



<%@ page contentType="text/html; charset=GBK" %>

<%@ page language="java" %>

<%@ page import="com.mysql.jdbc.Driver" %>

<%@ page import="java.sql.*" %>

<%

response.setContentType("application/xml;charset=GBK");
response.setHeader("Cache-Control", "no-cache");

//驱动程序名
String driverName="org.gjt.mm.mysql.Driver";

//数据库用户名

String userName="root";

//密码

String userPasswd="";

//数据库名

String dbName="";

//表名

String tableName="";

//联结字符串

String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd+"&useUnicode=true&characerEncoding=GBK";
String key=request.getParameter("names");

response.getWriter().write("<?xml version='1.0' encoding='GBK' ?>");
Class.forName("org.gjt.mm.mysql.Driver").newInstance();

Connection connection=DriverManager.getConnection(url);

Statement statement = connection.createStatement();

String sql="SELECT * FROM "+tableName+" WHERE ht_person_id like '%"+key+"%' ";

ResultSet rs = statement.executeQuery(sql); 

//获得数据结果集合

ResultSetMetaData rmeta = rs.getMetaData();
response.getWriter().write("<response>");
String col;
// 输出每一个数据值
while(rs.next()) {
	col = new String(rs.getString(2).getBytes("ISO-8859-1"),"GBk");
	response.getWriter().write("<res>"+col+"</res>");
} 
response.getWriter().write("</response>");
rs.close(); 
statement.close(); 
connection.close(); 
%>