webform MySQL_c# webform 仿百度自动补全(搭配mysql数据库)

输入框信息提示(数据库)

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

var obj;

if(window.XMLHttpRequest) { //Mozilla 浏览器

obj = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

obj = new ActiveXObject( "Msxml2.XMLHTTP");

} catch(e){

try{

obj = new ActiveXObject( "Microsoft.XMLHTTP");

} catch (e) {}

}

}

return obj;

}

//当输入框的内容变化时，调用该函数

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

var s='

s+=' οnmοuseοut= "javascript:suggestOut(this);" ';

s+=' οnclick= "javascript:setSearch(this.innerHTML);" ';

s+=' class= "suggest_link">' +sourceText[i]+'

';

suggestText.innerHTML += s;

}

}

else{

suggestText.style.display= "none";

}

}

}

};//指定响应函数

o.send(null); // 发送请求

}

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";

}

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;默认高度*/

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #CCC;

background-color:#FFF;

}