1,search.aspx (Show page)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Input Box Information tips (database) </title>
<script language= "javascript" type= "Text/javascript" >
Create a XMLHttpRequest Object
function Createxmlhttprequest () {
var obj;
if (window. XMLHttpRequest) {//mozilla browser
obj = new XMLHttpRequest ();
}
else if (window. ActiveXObject) {//IE browser
try {
obj = new ActiveXObject ("Msxml2.xmlhttp");
} catch (e) {
try{
obj = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return obj;
}
This function is called when the contents of the input box change.
function Searchsuggest () {
var Inputfield = document.getElementById ("Txtsearch");
var suggesttext = document.getElementById ("Search_suggest");
if (InputField.value.length > 0) {
var o=createxmlhttprequest ();
var url = "server.aspx?searchtext=" + Escape (inputfield.value);
O.open ("GET", url, True);
O.onreadystatechange = function () {
if (o.readystate = = 4) {
if (O.status = = 200) {
var sourcetext = o.responsetext.split ("\ n");
if (Sourcetext.length >1) {
Suggesttext.style.display= "";
suggesttext.innerhtml = "";
for (var i=0;i <sourcetext.length-1;i++) {
var s= ' <div onmouseover= ' javascript:suggestover (this);
s+= ' onmouseout= ' javascript:suggestout (this); " ‘;
s+= ' onclick= ' Javascript:setsearch (this.innerhtml); " ‘;
s+= ' class= "Suggest_link" > ' +sourcetext[i]+ ' </div> ';
Suggesttext.innerhtml + = s;
}
}
else{
Suggesttext.style.display= "None";
}
}
}
};//Specifying response functions
O.send (NULL); Send Request
}
else {
Suggesttext.style.display= "None";
}
}
function Suggestover (div_value) {
Div_value.classname = "Suggest_link_over";
}
function Suggestout (div_value) {
Div_value.classname = "Suggest_link";
}
function Setsearch (obj) {
document.getElementById ("Txtsearch"). Value = obj;
var div = document.getElementById ("Search_suggest");
div.innerhtml = "";
Div.style.display= "None";
}
function Tbblur () {
var div = document.getElementById ("Search_suggest");
div.innerhtml = "";
Div.style.display= "None";
}
</script>
<style type= "text/css" media= "screen" >
Body
{
font:11px Arial;
}
. suggest_link
{
Background-color: #FFFFFF;
padding:2px 6px 2px 6px;
}
. suggest_link_over
{
Background-color: #E8F2FE;
padding:2px 6px 2px 6px;
}
#search_suggest
{
Position:absolute;
Background-color: #FFFFFF;
Text-align:left;
border:1px solid #000000;
}
/*input*/
. input_on{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
Background-color: #FFFFCC;
}
. input_off{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
Background-color: #FFF;
}
. input_move{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
Background-color: #FFFFCC;
}
. input_out{
/*height:16px; Default Height */
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
Background-color: #FFF;
}
</style>
<body>
<form id= "Form1" action= "" >
<input type= "text" id= "Txtsearch" name= "Txtsearch" onkeyup= "searchsuggest ();" size= "[class=]" Input_out "onfocus= "This.classname= ' input_on '; this.onmouseout= '" onblur= "this.classname= ' Input_off '; This.onmouseout=function () { This.classname= ' Input_out '}; "onmousemove=" This.classname= ' input_move ' "onmouseout=" this.classname= ' input_out ' "/ ><br/>
<div id= "Search_suggest" ></div>
</form>
</body>
2.1,server.aspx (Data supply page, this page removes other extra code, leaving only the top row.) If you change your name here, remember to change the page's call to-_-.
<%@ page language= "C #" autoeventwireup= "true" codefile= "Server.aspx.cs" inherits= "Server"%>
2.2,server.aspx.cs (data provide page CS code)
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 MySql.Data.MySqlClient;
public partial class Server:System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
if (request.querystring["SearchText"]! = NULL)
{
if (request.querystring["SearchText"]. ToString (). Trim (). Length > 0)
{
DataTable dt = new DataTable ();
using (mysqlconnection conn = new Mysqlconnection ("Server=10.174.14.160;initial catalog=parts; User id=root;pwd=789789; Allow Zero datetime=true "))
{
Mysqlcommand cmd = new Mysqlcommand ();
Cmd. Connection = conn;
Cmd.commandtext = string. Format (
"SELECT distinct GNFL from summary Where gnfl like '%{0}% '",
request.querystring["SearchText"]);
Mysqldataadapter adapter = new Mysqldataadapter (cmd);
Conn. Open ();
Adapter. Fill (DT);
}
String returntext = "";
if (dt! = null && dt. Rows.Count > 0)
{
for (int i = 0; i < dt. Rows.Count; i++)
{
Returntext + = dt. Rows[i][0]. ToString () + "\ n";
}
}
Response.Write (Returntext);
}
}
}
}
C # WebForm Imitation Baidu Auto-complete (with MySQL database)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
