用AJAX实现google输入自动完成的简单模拟
比较简单的模拟,文本框输入CompanyName,然后搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成
四个文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>输入自动完成</title> <script language="javascript"> //输入信息的文本框 var txtInput; //下拉表当前选中项的索引 var currentIndex = -1; //初始化参数,和下拉表位置 function initPar() { txtInput = document.getElementById("txtCompanyName"); //设置下拉表 相对于 文本输入框的位置 setPosition(); } //设置下拉表 相对于 文本输入框的位置 function setPosition() { var width = txtInput.offsetWidth; var left = getLength("offsetLeft"); var top = getLength("offsetTop") + txtInput.offsetHeight; divContent.style.left = left + "px"; divContent.style.top = top + "px"; divContent.style.width = width + "px"; } //获取对应属性的长度 function getLength(attr) { var offset = 0; var item = txtInput; while (item) { offset += item; item = item.offsetParent; } return offset; } //自动完成 function autoComplete() { //如果按下 向上, 向下 或 回车 if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) { //选择当前项 selItemByKey(); } else //向服务器发送请求 { //如果值为空 if (txtInput.value == "") { divContent.style.display='none'; return; } //恢复下拉选择项为 -1 currentIndex = -1; //开始请求 requestObj = new ActiveXObject("Microsoft.XMLHTTP"); requestObj.onreadystatechange = displayResult; requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true); requestObj.send(txtInput.value); } } //显示结果 function displayResult() { if (requestObj.readyState == 4) { showData(); divContent.style.display = ""; } } //显示服务器返回的结果 ,并形成下拉表 function showData() { //获取数据 var doc = new ActiveXObject("MSXML2.DOMDocument.3.0"); doc.loadXML(requestObj.responseText); //显示数据的xslt var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); docStyle.async = false; docStyle.load("list.xslt"); var docTemplate = new ActiveXObject("MSXML2.XSLTemplate"); docTemplate.stylesheet = docStyle; //通过xslt转换xml数据 var processor = docTemplate.createProcessor(); processor.input = doc; processor.transform(); var res = processor.output; //显示转后后的结果 divContent.innerHTML = res; } //通过键盘选择下拉项 function selItemByKey() { //下拉表 var tbl = document.getElementById("tblContent"); if (!tbl) { return; } //下拉表的项数 var maxRow = tbl.rows.length; //向上 if (event.keyCode == 38 && currentIndex > 0) { currentIndex--; } //向下 else if (event.keyCode == 40 && currentIndex < maxRow-1) { currentIndex++; } //回车 else if (event.keyCode == 13) { selValue(); return; } clearColor(); txtInput.value = tbl.rows.innerText; //设置当前项背景颜色为blue 标记选中 tbl.rows.style.backgroundColor = "InfoBackground"; } //清除下拉项的背景颜色 function clearColor() { var tbl = document.getElementById("tblContent"); for (var i = 0; i < tbl.rows.length; i++) { tbl.rows.style.backgroundColor = ""; } } //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值 function selValue() { if (event.keyCode != 13) { var text = event.srcElement.innerText; txtInput.value = text; } initList(); } //文本框失去焦点时 设置下拉表可见性 function setDisplay() { //获取当前活动td的表格 if (document.activeElement.tagName == "TD") { var tbl = document.activeElement.parentElement.parentElement.parentElement; //如果不是下拉表,则隐藏 下拉表 if (tbl.id != "tblContent") { initList(); } return; } initList(); } function initList() { divContent.style.display='none'; divContent.innerHTML = ""; currentIndex = -1; } </script></head><body >CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()"style="width:400px"/><!-- 显示下拉表的div--><div id="divContent" style="display:none; position:absolute; "></div></body></html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>AutoComplete.aspx.csusing System;using System.Data;using System.Data.SqlClient;using System.Configuration;using System.Collections;using System.IO;using System.Text;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Web.Configuration;namespace AJAXBaseHome{ public partial class AutoComplete : System.Web.UI.Page { private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString; protected void Page_Load(object sender, EventArgs e) { string input = GetInput(); Response.Write(GetCompanyName(input)); } //获取输入的字符串 private string GetInput() { Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte; StringBuilder builder = new StringBuilder(); while ((count = s.Read(buffer, 0, 1024)) > 0) { builder.Append(Encoding.UTF8.GetString(buffer, 0, count)); } return builder.ToString(); } private string GetCompanyName(string input) { using (SqlConnection con = new SqlConnection(conString)) { SqlCommand command = new SqlCommand("select * from suppliers where CompanyName like @Name", con); command.Parameters.Add(new SqlParameter("@name", input + "%")); SqlDataAdapter adapter = new SqlDataAdapter(command); DataSet ds = new DataSet(); adapter.Fill(ds); return ds.GetXml(); } } }}
<?xml version="1.0" encoding="UTF-8" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html"/><xsl:template match="/"> <xsl:apply-templates/></xsl:template><xsl:template match="NewDataSet"> <table id="tblContent" style="background-color:GrayText"> <xsl:for-each select="Table"> <tr> <!--td中单击时选择当前值, 鼠标在上时更改行背景颜色,鼠标离开后清除背景颜色--> <tdstyle="cursor:hand"onmouseout="clearColor()"> <xsl:value-of select="CompanyName"/> </td> </tr> </xsl:for-each> </table></xsl:template></xsl:stylesheet>
页:
[1]