大家应该都看到过 GOOGLE 的搜索建议,就是当我们在输入关键词时,GOOGLE 会根据我们目前已输入的字显示相关的关键字建议,这就是搜索建议,现在很多网站都实现该友好的功能,如 YAHOO、狗狗搜索等。
实现该功能的思路就是:
其实就是异步回发(AJAX)。
下面是一个实例,实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID,当用户要输入框输入字时,返回该字段值与用户输入的字开头匹配的记录,即 CustomerID LIKE '用户已输入的字%'。
样式已设置好,显示建议的行为绝对位置,所以该行不会显示网页上的内容。
文件名:WordSuggest.aspx
源码如下:
.aspx
.CS
实现该功能的思路就是:
- 在关键字输入框里,当用户按键弹起时,发送输入框里的字符串到服务器。
- 服务器根据收到客户端发来的字进入匹配搜索
- 将匹配用户已输入字的记录回发到客户端
- 客户端收到服务端的响应,输出建议。
其实就是异步回发(AJAX)。
下面是一个实例,实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID,当用户要输入框输入字时,返回该字段值与用户输入的字开头匹配的记录,即 CustomerID LIKE '用户已输入的字%'。
样式已设置好,显示建议的行为绝对位置,所以该行不会显示网页上的内容。
文件名:WordSuggest.aspx
源码如下:
.aspx
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
WordSuggest.aspx.cs
"
Inherits
=
"
WordSuggest
"
%>
<! 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 runat ="server" >
< title > 无标题页 </ title >
< style type ="text/css" >
.CInput { border : solid 1px gray ; width : 300px }
#divSuggestions { border : solid 1px gray ; width : 300px ; background : #fff ; visibility : hidden }
#divSuggestions span { display : block ; padding : 3px }
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< h1 > 搜索建议 DEMO </ h1 >
< span > http://www.code-studio.net </ span >
< hr />
< table style ="border-collapse:collapse;" >< tr >< td >< asp:TextBox ID ="txtInput" runat ="server" CssClass ="CInput" onkeyup ="sendRqt(this)" ></ asp:TextBox >
< asp:Button ID ="Button1" runat ="server" Text ="Submit" /></ td ></ tr >
< tr style ="position:absolute;" >< td >< div id ="divSuggestions" ></ div ></ td ></ tr ></ table >
</ div >
</ form >
< script type ="text/javascript" >
var xhr;
var isIe = window.navigator.appName.indexOf( " Netscape " ) == - 1 ? true : false ;
function $(sElmId){ return document.getElementById(sElmId);}
function crtRqt(){
if (window.ActiveXobject)
xhr = new ActiveXObject( " Microsoft.XMLHTTP " );
else xhr = new XMLHttpRequest();
}
function sendRqt(srcElm){
var sInput = srcElm.value;
if (sInput != "" ){
var url = " wordsuggest.aspx?t= " + new Date().getTime() + " &w= " + sInput;
crtRqt();
xhr.onreadystatechange = hdlRsp;
xhr.open( " GET " ,url, true );
xhr.send( null );
}
else $( " divSuggestions " ).style.visibility = " hidden " ;
}
function hdlRsp(){
if (xhr.readyState == 4 && xhr.status == 200 ){
var rspText = xhr.responseText;
var oDiv = $( " divSuggestions " );
if (rspText != "" ){
var arrRspText = xhr.responseText.split( ' , ' );
var sInnerHtml = "" ;
for ( var i = 0 ;i < arrRspText.length; ++ i){
sInnerHtml += " <span οnmοuseοver='setStyle(this,true)' οnmοuseοut='setStyle(this,false)' "
+ " οnclick='setInput(this)'> " + arrRspText[i] + " </span> " ;
}
oDiv.innerHTML = sInnerHtml;
oDiv.style.visibility = " visible " ;
}
else oDiv.style.visibility = " hidden " ;
}
}
function setStyle(srcElm,bOver){
srcElm.style.background = bOver ? " orange " : "" ;
}
function setInput(srcElm){
$( " <%=txtInput.ClientID %> " ).value = srcElm.innerHTML;
}
</ script >
</ body >
</ html >
<! 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 runat ="server" >
< title > 无标题页 </ title >
< style type ="text/css" >
.CInput { border : solid 1px gray ; width : 300px }
#divSuggestions { border : solid 1px gray ; width : 300px ; background : #fff ; visibility : hidden }
#divSuggestions span { display : block ; padding : 3px }
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< h1 > 搜索建议 DEMO </ h1 >
< span > http://www.code-studio.net </ span >
< hr />
< table style ="border-collapse:collapse;" >< tr >< td >< asp:TextBox ID ="txtInput" runat ="server" CssClass ="CInput" onkeyup ="sendRqt(this)" ></ asp:TextBox >
< asp:Button ID ="Button1" runat ="server" Text ="Submit" /></ td ></ tr >
< tr style ="position:absolute;" >< td >< div id ="divSuggestions" ></ div ></ td ></ tr ></ table >
</ div >
</ form >
< script type ="text/javascript" >
var xhr;
var isIe = window.navigator.appName.indexOf( " Netscape " ) == - 1 ? true : false ;
function $(sElmId){ return document.getElementById(sElmId);}
function crtRqt(){
if (window.ActiveXobject)
xhr = new ActiveXObject( " Microsoft.XMLHTTP " );
else xhr = new XMLHttpRequest();
}
function sendRqt(srcElm){
var sInput = srcElm.value;
if (sInput != "" ){
var url = " wordsuggest.aspx?t= " + new Date().getTime() + " &w= " + sInput;
crtRqt();
xhr.onreadystatechange = hdlRsp;
xhr.open( " GET " ,url, true );
xhr.send( null );
}
else $( " divSuggestions " ).style.visibility = " hidden " ;
}
function hdlRsp(){
if (xhr.readyState == 4 && xhr.status == 200 ){
var rspText = xhr.responseText;
var oDiv = $( " divSuggestions " );
if (rspText != "" ){
var arrRspText = xhr.responseText.split( ' , ' );
var sInnerHtml = "" ;
for ( var i = 0 ;i < arrRspText.length; ++ i){
sInnerHtml += " <span οnmοuseοver='setStyle(this,true)' οnmοuseοut='setStyle(this,false)' "
+ " οnclick='setInput(this)'> " + arrRspText[i] + " </span> " ;
}
oDiv.innerHTML = sInnerHtml;
oDiv.style.visibility = " visible " ;
}
else oDiv.style.visibility = " hidden " ;
}
}
function setStyle(srcElm,bOver){
srcElm.style.background = bOver ? " orange " : "" ;
}
function setInput(srcElm){
$( " <%=txtInput.ClientID %> " ).value = srcElm.innerHTML;
}
</ script >
</ body >
</ html >
.CS
using
System;
using System.Data;
using System.Configuration;
using System.Collections;
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.Data.SqlClient;
public partial class WordSuggest : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
string strInput = string .IsNullOrEmpty(Request.QueryString[ " w " ]) ? string .Empty : Request.QueryString[ " w " ];
if (strInput.Trim().Length != 0 )
{
Suggeste(strInput);
}
}
private void Suggeste( string originalStr)
{
/* 搜索建议
* 文件名: WordSuggest.aspx
* 功能描述: 根据用户输入,在数据库 Northwind 的表 Customers 查找 CustomerID 字段值匹配的记录.
*/
SqlConnection conn = new SqlConnection( " data source=localhost;database=northwind;user id=sa;password=你的密码 " );
string cmdText = " SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w " ;
SqlParameter para = new SqlParameter( " @w " , string .Format( " {0}% " , originalStr));
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = cmdText;
cmd.Parameters.Add(para);
conn.Open();
SqlDataReader reader = cmd.ExecuteReader();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
while (reader.Read())
{
sb.AppendFormat( " {0}, " , reader[ 0 ]);
}
reader.Close();
conn.Close();
Response.ContentType = " text/plain " ;
Response.Clear();
if (sb.Length != 0 )
{
Response.Write(sb.ToString().Remove(sb.Length - 1 ));
}
else
{
Response.Write( string .Empty);
}
Response.Flush();
Response.Close();
}
}
using System.Data;
using System.Configuration;
using System.Collections;
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.Data.SqlClient;
public partial class WordSuggest : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
string strInput = string .IsNullOrEmpty(Request.QueryString[ " w " ]) ? string .Empty : Request.QueryString[ " w " ];
if (strInput.Trim().Length != 0 )
{
Suggeste(strInput);
}
}
private void Suggeste( string originalStr)
{
/* 搜索建议
* 文件名: WordSuggest.aspx
* 功能描述: 根据用户输入,在数据库 Northwind 的表 Customers 查找 CustomerID 字段值匹配的记录.
*/
SqlConnection conn = new SqlConnection( " data source=localhost;database=northwind;user id=sa;password=你的密码 " );
string cmdText = " SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w " ;
SqlParameter para = new SqlParameter( " @w " , string .Format( " {0}% " , originalStr));
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = cmdText;
cmd.Parameters.Add(para);
conn.Open();
SqlDataReader reader = cmd.ExecuteReader();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
while (reader.Read())
{
sb.AppendFormat( " {0}, " , reader[ 0 ]);
}
reader.Close();
conn.Close();
Response.ContentType = " text/plain " ;
Response.Clear();
if (sb.Length != 0 )
{
Response.Write(sb.ToString().Remove(sb.Length - 1 ));
}
else
{
Response.Write( string .Empty);
}
Response.Flush();
Response.Close();
}
}