智能提示功能，类baidu等关键字弹出提示。

/**
注意本JS与DropUp.css合用使用
在输入框的onkeyup事件调用如：οnkeyup='obj_keyup(target_id,DropUPDIV_id,strurl)'的函数使用

  
使用的弹出选择框

  
////////服务页面Server.aspx/////////////////////  
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient ; 
using MAXWEB.func ;


namespace MAXWEB.temp.NewFolder1
{
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)
{
SQLAction sqlac = new SQLAction();
string sqltxt="";
sqltxt =    "Select distinct top 10 PRTNUM From ZC_PRTMST Where PRTNUM like '" + Request.QueryString["searchText"].ToString()   + "%'";
                        
                                
DataTable  dt = sqlac.GetDS(sqltxt).Tables[0];  
               
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);
}
}


}
}
}


  
/////////////DropUp.css的内容////////////////////////
  
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_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;
width: 146px;
}


    
  


  
        
**/


var div_index;
div_index = -1;  //全局变量
var str_target_id;
var str_DropUp_id;
var str_value_id;
var div_sel_value; //选择的值
div_sel_value = "";
var div_mouseover;
div_mouseover = false;


// js 得到网页中控件绝对位置2010-07-12 12:01
function getAbsoluteLeft(ob) {
    if (!ob) { return null; }
    var mendingOb = ob;
    var mendingLeft = mendingOb.offsetLeft;
    mendingOb = mendingOb.offsetParent;
    while (mendingOb != null) {
        // mendingLeft += mendingOb .offsetParent.offsetLeft;
        mendingLeft += mendingOb.offsetLeft;
        mendingOb = mendingOb.offsetParent;
    }
    return mendingLeft;
}


// get absolute TOP position
function getAbsoluteTop(ob) {
    if (!ob) { return null; }
    var mendingOb = ob;
    var mendingTop = mendingOb.offsetTop;
    //while( mendingOb != null && mendingOb .offsetParent != null && mendingOb .offsetParent.tagName != "BODY" ){
    mendingOb = mendingOb.offsetParent;
    while (mendingOb != null) {
        mendingTop += mendingOb.offsetTop;
        mendingOb = mendingOb.offsetParent;
    }
    return mendingTop;
}




//检查控件是否可见
function checkobjvisual(e) {


    var objvis = false;
    if (e) {
        if (e.offsetHeight > 0) {
            objvis = true;
        }
        if (e.offsetTop > 0) {
            objvis = true;
        }
        
         if (e.readOnly == true) {
             objvis = false;  
       }  
      
    }
    return objvis;
}




function focunext(next_id) {


    var code;
    if (!e) {
        var e = window.event;
    }
    if (e.keyCode) {
        code = e.keyCode;
    }
    else if (e.which) {
        code = e.which;
    }
    if (code == 13) {


        if (next_id)
        {document.getElementById(next_id).focus(); }
        else {
            var inputList = document.getElementsByTagName("input");
            // 循坏这个集合，包括了所有的input。
            var nextindex;
            nextindex = -1;
            for (i = 0; i < inputList.length; i++) {
                if (inputList[i] == document.activeElement) {
                    var acobj = document.activeElement;
                    nextindex = i + 1;
                    
                    while ((!checkobjvisual(inputList[nextindex])) && (nextindex <= inputList.length)) {
                        nextindex = nextindex + 1;
                    }
                    if (inputList[nextindex])  inputList[nextindex].focus();
                    break;
                }
            }
            
        }
    }
}




document.onkeydown = function(e) {


    var code;
    if (!e) {
        var e = window.event;
    }
    if (e.keyCode) {
        code = e.keyCode;
    }
    else if (e.which) {
        code = e.which;
    }


    if (code == 8) {
        if (document.activeElement.readOnly == true || document.activeElement.disabled == true)
        { return false; }
    }


    if (code == 13) {
        if (document.activeElement.type == "textarea") {
            return;
        }
        if (document.activeElement.type != "submit" && document.activeElement.type != "button") {
            hidediv();
            // event.keyCode = 9;
            focunext();
            return false;
        }
    }




}




//创建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(target_id, DropUP_id, strurl) {
    var inputField = document.getElementById(target_id);
    var suggestText = document.getElementById(DropUP_id);
    var url = strurl + "?searchText=" + escape(inputField.value);
    ajax_search(target_id, DropUP_id, url);
}




//当输入框的内容变化时，调用该函数
//strurl包含收索的
function ajax_search(target_id, DropUP_id, strurl) {
    div_index = -1;
    var inputField = document.getElementById(target_id);
    var suggestText = document.getElementById(DropUP_id);
    var search_txt;
    search_txt = inputField.value;
    if (search_txt.length <= 0) {
        var str_index = strurl.indexOf("=");
        if (str_index > 0)
            search_txt = strurl.substring(str_index + 1);
    }
    if (search_txt.length > 0) {
        var o = createXMLHttpRequest();
        /////////////// 
        //   var url = strurl +  "?searchText=" + escape(inputField.value);
        var url = strurl + "&hehe=" + Math.ceil(Math.random() * 1000);
        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.left = getAbsoluteLeft(inputField).toString() + "px"  ;
                        suggestText.style.top = (getAbsoluteTop(inputField)  + inputField.clientHeight).toString() + "px" ;
                        suggestText.style.display = "";
                        suggestText.innerHTML = "";


                        for (var i = 0; i < sourceText.length - 1; i++) {
                            var s = '

                            s += ' οnmοuseοut="javascript:suggestOut(this);" ';
                            s += ' οnclick="javascript:setSearch(this);" ';
                            chr_index = sourceText[i].indexOf("=");
                            if (chr_index <= 1) {
                                s += ' class="suggest_link">' + sourceText[i] + '

';
                            }
                            else {
                                var strname;
                                var strvaue;
                                strname = sourceText[i].substring(0, chr_index);
                                strvaue = sourceText[i].substring(chr_index + 1);
                                s += ' class="suggest_link">' + strname + '

';
                                //值 
                                s += '

' + strvaue + '

';
                            }
                            suggestText.innerHTML += s;
                        }
                    }
                    else {
                        suggestText.style.display = "none";
                    }
                }
            }
        }; //指定响应函数 
        o.send(null); // 发送请求 
    }
    else {
        suggestText.style.display = "none";
    }
}


function o_keyup(target_id, DropUP_id, strurl, bool_state, value_id) {
    var b_refreash
    var strid
    var valueid


    var div = document.getElementById(str_DropUp_id);


    str_target_id = target_id;
    str_DropUp_id = DropUP_id;
    str_value_id = value_id;
    b_refreash = true;


    if (event != null) {
        if (event.keyCode == 9) //回车
        {
            b_refreash = false;
            hidediv();
            return;
        }
        if (event.keyCode == 13) //回车
        {
            b_refreash = false;
            hidediv();
            event.keyCode = 9;
            return;
        }
        if (event.keyCode == 37) //左
        {
            b_refreash = false;
        }
        if (event.keyCode == 38) //上
        {
            b_refreash = false;


            strid = "divsel" + div_index;
            valueid = "divvalue" + div_index;
            if (document.getElementById(strid)) {
                document.getElementById(strid).className = "suggest_link";


            }
            div_index = div_index - 1;
            if (div_index < 0) div_index = -1;


            strid = "divsel" + div_index;
            valueid = "divvalue" + div_index;
            if (document.getElementById(strid)) {
                if (div.style.display != "none")
                    document.getElementById(target_id).value = document.getElementById(strid).innerHTML;
                if (document.getElementById(valueid)) {
                    div_sel_value = document.getElementById(valueid).innerHTML;
                    if (document.getElementById(str_value_id))
                        document.getElementById(str_value_id).value = div_sel_value;
                }
                document.getElementById(strid).className = "suggest_link_over";
            }
            //document.getElementById("divsel1").innerHTML = "kk";
        }


        if (event.keyCode == 39) //右
        {
            b_refreash = false;
        }
        // alert(event.keyCode);     




        if (event.keyCode == 40) //下
        {
            b_refreash = false;
            if (div_index > 10) div_index = 10;
            strid = "divsel" + div_index;
            valueid = "divvalue" + div_index;
            if (document.getElementById(strid)) {
                document.getElementById(strid).className = "suggest_link";
            }


            div_index = div_index + 1;
            strid = "divsel" + div_index;
            valueid = "divvalue" + div_index;
            if (document.getElementById(strid)) {
                if (div.style.display != "none")
                    document.getElementById(target_id).value = document.getElementById(strid).innerHTML;
                if (document.getElementById(valueid)) {
                    div_sel_value = document.getElementById(valueid).innerHTML;
                    if (document.getElementById(str_value_id))
                        document.getElementById(str_value_id).value = div_sel_value;
                }
                document.getElementById(strid).className = "suggest_link_over";
            }






        }


    }
    if (b_refreash) {
        if (bool_state) {
            searchSuggest(target_id, DropUP_id, strurl);
        }
        else {
            ajax_search(target_id, DropUP_id, strurl);
        }
    }


}


//每次输入框按键触发
function obj_keyup(target_id, DropUP_id, strurl, value_id) {
    o_keyup(target_id, DropUP_id, strurl, true, value_id);
}


//直接以strurl的内容触发
function obj_keyup2(target_id, DropUP_id, strurl, value_id) {
    o_keyup(target_id, DropUP_id, strurl, false, value_id);
}


function suggestOver(div_value) {
    div_value.className = "suggest_link_over";
    div_mouseover = true;
}


function suggestOut(div_value) {
    div_value.className = "suggest_link";
    div_mouseover = false;
}


function setSearch(obj) {


    document.getElementById(str_target_id).value = obj.innerHTML;
    var divid;
    divid = obj.id;
    var str_index = divid.substring(("divsel").length);
    var o_id = "divvalue" + str_index;
    var odiv = document.getElementById(o_id);
    if (odiv != null) {
        div_sel_value = odiv.outerText
        if (document.getElementById(str_value_id)) {
            document.getElementById(str_value_id).value = div_sel_value;
        }
        //alert(div_sel_value); 
    }
    hidediv();
}


function hidediv() {
    var div = document.getElementById(str_DropUp_id);
    //
    if (div) {
        div.style.display = "none";
        div.innerHTML = "";
    }
}


function tbblur() {
    if (!div_mouseover)
        hidediv();
}