1. Copy the suggest. js code and save it as suggest. js. Just reference it on the page you need.
Copy codeThe Code is as follows: // create cross-browser xmlHttp Object Reference
Var xmlHttp;
Var k =-1;
Try
{
XmlHttp = new XMLHttpRequest ();
}
Catch (e)
{
Var XMLHTTP_IDS = new Array ('msxml2. XMLHTTP.5.0 ', 'msxml2. XMLHTTP.4.0', 'msxml2. XMLHTTP.3.0 ', 'msxml2. xmlhttp', 'Microsoft. xmlhttp ');
Var success = false;
For (var I = 0; I <XMLHTTP_IDS.length &&! Success; I ++)
{
Try {
XmlHttp = new ActiveXObject (XMLHTTP_IDS [I]);
Success = true;
} Catch (e ){}
}
If (! Success ){
Throw new Error ('unable to create XMLHttpRequest .');
}
}
// Get the reference variable used on the page
Function initVars (){
InputField = document. getElementById ("FrmChangshang ");
NameTable = document. getElementById ("name_table ");
CompleteDiv = document. getElementById ("popup ");
NameTableBody = document. getElementById ("name_table_body ");
Document. getElementById ("popup"). style. display = "block ";
}
// Ajax front-end trigger function
Function findNames (event ){
Var keyc = (window. navigator. appName = "Microsoft Internet Explorer ")? Event. keyCode: e. which;
If (keyc! = 40 & keyc! = 38)
{
If (inputField. value. length> 0)
{
Var url = "SearchCompany. aspx? Cname = "+ inputField. value +" & rnd = "+ Math. random (). toString ();
XmlHttp. open ("GET", url, true );
XmlHttp. onreadystatechange = callback;
XmlHttp. send (null );
}
Else
{
ClearNames ();
}
}
}
// Ajax callback function
Function callback ()
{
Var names;
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200)
{
Try
{
Names = xmlHttp. responseXML. getElementsByTagName ("name ");
}
Catch (e)
{
CompleteDiv. style. display = "none ";
ClearNames ();
}
K =-1; // select again from the first item
SetNames (names );
}
Else if (xmlHttp. status = 204)
{
ClearNames ();
}
}
}
// Function for determining the position of the pop-up layer
Function divsOffset ()
{
Var inputWidth = inputField. offsetWidth;
Var inputHeight = inputField. offsetHeight;
Var inputTop = inputField. offsetTop;
Var inputLeft = inputField. offsetLeft;
NameTable. style. width = inputWidth + "px ";
CompleteDiv. style. width = inputWidth + "px ";
CompleteDiv. style. top = (getTop (inputField) + inputHeight) + "px ";
CompleteDiv. style. left = getLeft (inputField) + "px ";
CompleteDiv. style. border = "#817f82 1px solid ";
CompleteDiv. style. position = "absolute ";
// Obtain the absolute ordinate of an element
Function getTop (e ){
Var offset = e. offsetTop;
If (e. offsetParent! = Null) offset + = getTop (e. offsetParent );
Return offset;
}
// Obtain the abscissa of an element
Function getLeft (e ){
Var offset = e. offsetLeft;
If (e. offsetParent! = Null) offset + = getLeft (e. offsetParent );
Return offset;
}
// Alert (inputWidth + "----" + inputwidth + "----" + inputtopleft + "----" + inputtop );
}
// Add the returned data to the table function
Function setNames (the_names ){
ClearNames ();
DivsOffset ();
For (var I = 0; I <the_names.length; I ++)
{
Var nextNode = the_names [I]. firstChild. nodeValue;
Var row = document. createElement ("tr ");
Var cell = document. createElement ("td ");
Cell. onmouseout = function () {this. className = "mouseOut ";};
Cell. onmouseover = (function (tdi) {return function () {k = tdi; setStyle (k) ;}}) (I );
Cell. setAttribute ("bgcolor", "# FFFAFA ");
Cell. setAttribute ("border", "0 ");
Cell. setAttribute ("style", "font-size: 15px ");
Cell. onclick = function () {populateName (this );};
// Add nextNode to td
Var txtName = document. createTextNode (nextNode );
Cell. appendChild (txtName );
Row. appendChild (cell );
NameTableBody. appendChild (row );
}
}
// Click a data entry and add it to inputField.
Function populateName (cell ){
// Fill in the data to the web page, cell ----> td object
InputField. value = cell. firstChild. nodeValue;
ClearNames ();
}
// Set the style
Function setStyle (num)
{
Var tBody = nameTableBody. getElementsByTagName ("td ");
For (var I = 0; I <tBody. length; I ++)
{
If (I> = 0 & I <tBody. length & I = num)
{
TBody [I]. className = "mouseOver ";
}
Else
{
TBody [I]. className = "mouseOut ";
}
}
}
// Obtain the upper and lower keys of the keyboard
Function updown (e)
{
Var tBody = nameTableBody. getElementsByTagName ("td ");
Var keyc = (window. navigator. appName = "Microsoft Internet Explorer ")? Event. keyCode: e. which;
If (tBody = null)
Return;
If (keyc = 40)
{
K ++;
If (k> = tBody. length)
{
K = 0;
}
InputField. value = tBody [k]. firstChild. nodeValue;
}
Else if (keyc = 38)
{
K --;
If (k <=-1)
{
K = tBody. length-1;
}
InputField. value = tBody [k]. firstChild. nodeValue;
}
SetStyle (k );
}
// Clear the list Array
Function clearNames (){
Var ind = nameTableBody. childNodes. length;
Var completeDiv = document. getElementById ("popup ");
For (var I = ind-1; I> = 0; I --){
NameTableBody. removeChild (nameTableBody. childNodes [I]);
}
CompleteDiv. style. border = "none ";
}
2. Front-end pageCopy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "searchcom. aspx. cs" Inherits = "member_searchcom" %>
<! 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">
<Style type = "text/css">
<! --
. MouseOut
{
Font-size: 15px;
Background: # ffffff;
Color: #000000;
}
. MouseOver
{
Font-size: 15px;
Background: # 3366cc;
Color: # ffffff;
Cursor: pointer;
}
-->
</Style>
<Title> No title page </title>
<Script language = "javascript" src = "../js/suggest. js" type = "text/javascript"> </script>
</Head>
<Body onload = "initVars ();">
<Form id = "form1" runat = "server">
<Div>
<Table>
<Tr>
<Td>
</Td>
<Td>
</Td>
<Td>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
</Td>
<Td>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
</Td>
<Td> <input id = "FrmChangshang" name = "FrmChangshang" type = "text" style = "width: 320px; "maxlength =" 20 "onkeyup =" findNames (event); "onkeydown =" updown (event); "onclick =" findNames (event); "/>
<Div id = "popup">
<Table id = "name_table" bgcolor = "# FFFAFA" border = "0" cellspacing = "0" cellpadding = "3px">
<Tbody id = "name_table_body"> </tbody>
</Table>
</Div>
</Td>
</Tr>
</Table>
<Br/>
<Br/>
<Br/>
</Div>
</Form>
</Body>
</Html>
3. background processing pageCopy codeThe Code is as follows: 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;
Using CaiHong. DBUtility;
Public partial class member_SearchCompany: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
// Obtain your own database connection. Database Calling uses SqlHelper. To use the following code, download SqlHelper to your own defined folder and add references. Otherwise, write your own database access code.
String strconn = ConfigurationManager. ConnectionStrings ["DBConn"]. ConnectionString;
String keyword = Request. QueryString ["cname"];
String SQL = "select Member_TrueName from users where Member_TrueName like '%" + @ keyword + "%' and Member_ShenFen = 1 order by id desc ";
SqlParameter spr = new SqlParameter ("@ keyword", SqlDbType. NVarChar, 50 );
Spr. Value = keyword;
Response. ContentType = "text/xml ";
Response. Write ("<? Xml version = \ "1.0 \" encoding = \ "GB2312 \"?> ");
Response. Write ("<response> ");
Using (SqlConnection sqlconn = new SqlConnection (strconn ))
{
Sqlconn. Open ();
SqlDataReader SID = SqlHelper. ExecuteReader (sqlconn, CommandType. Text, SQL );
If (DH. HasRows)
{
While (DH. Read ())
{
Response. Write ("<content> ");
Response. Write ("<name>" + Len. GetString (0) + "</name> ");
Response. Write ("</content> ");
}
}
Else
{
Response. Write ("<content> ");
Response. Write ("<name> IsKong </name> ");
Response. Write ("</content> ");
}
Response. Write ("</response> ");
De. Close ();
}
}
}
