实现textbox输入时模糊查询

1。引用的一个文件

代码

// JScript 文件

//********************************************************
//创建日期:  2010-05-5
//內容说明:  自动完成JS类
//用法：
// onkeyup = "findNames('id1','id2','1');" id1 - 自动完成文本框id，id2 - 赋值文本框id  1- 表示 id1字段模糊查询，2-  'id2字段模糊查询
// onblur = "lostfocus(this);"
//********************************************************
  
  var  inputField;        //输入文本框
  var  outputField;       //输出文本框
  var  DivResult ;        //div
  var  xmlHttp;           //XMLHttpRequest 
  var  fontsize = 2;      //字体大小
  var  flagValue ;        //标示符（1 - 以code 检索，2 以name 检索）
  var  selectName  = "";  //鼠标选中单元格name值
  var  selectValue = "";  //鼠标选中单元格code值
  //未选中颜色
  var  NobackColor = "#FFFFFF"; 
  var  NoColor = "#000000";
  //选中颜色
  var backColor = "#3161CE";
  var sColor = "#FFFFFF";

    function findNames(inputName,outputName,flag)//键盘出发事件
    {
        inputField  = document.getElementById(inputName);
        outputField = document.getElementById(outputName);
        flagValue = flag;
        //code 文本框不能用是，禁用自动填充
        if(outputField.disabled == true)
        {
          return ;
        }
        //创建DIV
       if(DivResult == null||typeof(DivResult)=="undefined")
       {
             DivResult = document.createElement("div");
             DivResult.setAttribute("id","divid");
             DivResult.style.cursor   =   "default";// 设置光标  
             DivResult.onblur = function(){ lostfocus(this)}
             
             var parent =  inputField.parentElement;
             if(typeof(parent)!="undefined")
             {
                parent.appendChild(DivResult);
             }
       }
       //如果按下 向上, 向下 或 回车
        if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
        { 
           return;
        } 
        else if (trim(inputField.value) == "")
        {
            //初始化div
           InitItem();
           return;
        }
        else
        {
            if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
                if(xmlHttp.overrideMimeType)
                   xmlHttp.overrideMimeType("text/xml");
            }
            else if(window.ActiveXObject)
            {
                try
                {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e)
                {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }

            if(xmlHttp == null)
                return;
            
            xmlHttp.onreadystatechange = ShowResult;//设置回调函数
            xmlHttp.open("GET", "AutoComplete.aspx?flag="+ escape(flagValue)+"&InputValue=" + escape(trim(inputField.value)).replace('+','%2B'), true);//编码不一致
            xmlHttp.send(null); 
        }
    }
    
    function ShowResult() //回调函数
    {
       if (xmlHttp.readyState == 4)//请求完成
       {
          if(xmlHttp.status == 200)//交易成功
          {
              //获取xml数组
              var values = xmlHttp.responseXML.getElementsByTagName("ProductName");   
              var ids  = xmlHttp.responseXML.getElementsByTagName("ProductCode");    
              var size = values.length; 
              InitItem();//初始化div
              if(size ==0)
              {
                return;
              }
              //设置Div位置
              setDiv(size)
              tbl = document.createElement("table");
              tbl.setAttribute("id","AutoComplete_tbl");//设置表id
              tbl.setAttribute("cellSpacing","1");
              tbl.setAttribute("cellPadding","1");
                      
              tbody = document.createElement("tbody");
             
              var row, cell, txtNode;   
              for (var i = 0; i < size; i++) {     //开始填充    
                 if(values[i].firstChild == null)
                 {
                     var nextNode = ''
                 }
                 else
                 {
                   var nextNode = values[i].firstChild.data;   
                 }
                 if(ids[i].firstChild == null)
                 {
                     var nextId = ''
                 }
                 else
                 {
                   var nextId = ids[i].firstChild.data; 
                 }
                 row = document.createElement("tr");  
                 row.setAttribute("ReturnValue",nextId) 
                 row.setAttribute("ReturnName",nextNode);
                 row.onmouseover = function(){ mouseover(this);}
                 row.onmouseout  = function(){ mouseout(this);}
                 row.setAttribute("id",i);//行数标示符 
             
                 cell = document.createElement("td");
                 cell.setAttribute("bgcolor", "#FFFAFA");   
                 cell.setAttribute("border", "0"); 
               //  cell.setAttribute("nowrap","true");//不自动换行
                
                 font = document.createElement("font"); 
                 font.setAttribute("size",fontsize+"px");
                 if(flagValue == "1")
                 {
                    txtNode = document.createTextNode(nextId +" / " + nextNode); 
                 }
                 else if(flagValue=="2")
                 {
                    txtNode = document.createTextNode(nextNode +" / " + nextId); 
                 }
                 
                 font.appendChild(txtNode);
                 cell.appendChild(font) ;
                 row.appendChild(cell);
                 tbody.appendChild(row);
              } 
              tbl.appendChild(tbody)
              DivResult.appendChild(tbl);
              //显示属性
              DivResult.style.display = ""; 
           }
          else if (xmlHttp.status == 204)//请求收到，但返回信息为空
          {
             InitItem();//初始化div
          }
        }
     }     
 
   function  InitItem()//初始化Div
    {
        if(DivResult != null&&typeof(DivResult)!="undefined")
        {
           DivResult.style.display = 'none';
           DivResult.innerHTML = "";
        }
        selectValue = "";
        selectName = "";
        currentIndex = -1;
    }

   
    //设置页面值
    function ReturnAutoComplete(ReturnValue,ReturnName)
    {
      if(flagValue == "1")
      {
          //页面元素赋值
          inputField.value = ReturnValue;
          outputField.value = ReturnName; 
      }
      else if (flagValue == "2")
      {
          inputField.value = ReturnName;
          outputField.value = ReturnValue; 
      }
    }
  function mouseover(obj)
  {
      //选中颜色
      obj.style.backgroundColor = backColor; 
      obj.style.color = sColor;
      selectValue = obj.ReturnValue;
      selectName = obj.ReturnName;
  }
  
  function mouseout(obj)//鼠标离开事件
  {
     //设置默认颜色
      obj.style.backgroundColor = NobackColor; 
      obj.style.color = NoColor;
      selectValue = "";
      selectName = "";
  }
 function setDiv(rowSize)//设置div位置
 {
    DivResult.style.position = "absolute";
    DivResult.style.border = "1px solid black";
    DivResult.style.top  = inputField.getBoundingClientRect().bottom -2 + "px";
    DivResult.style.left = inputField.getBoundingClientRect().left - 2 + "px";
    DivResult.style.backgroundColor = NobackColor;
    
    if(rowSize > 12)//设置滚动条    add 2009-6-16 on xuzhenzhong
    {
       DivResult.scrollTop = "0"; //滚动条位置初始化 add 2009-6-16 on xuzhenzhong
       DivResult.scrollLeft = "0";
       DivResult.style.height = "204px";
       DivResult.style.overflow = "auto";
    }
    else
    {
       DivResult.style.overflow = "hidden";//取消滚动条
       DivResult.style.height = "";
    }
 }
 
 //输入文本框失去焦点
 function lostfocus(ob)
 {
   if((ob == inputField||ob.id == 'divid')&&(selectValue != ""))
   {
      ReturnAutoComplete(selectValue,selectName);
      InitItem();
   }
   if(document.activeElement.id != 'divid')
   {
      InitItem();
   }
 }
 
 //删除左右两端的空格
function trim(str)
{
   return str.replace(/(^/s*)|(/s*$)/g,'');
}



 

 

2。js牵涉到的一个AutoComplete.aspx页面内容

代码

public partial class AutoComplete : System.Web.UI.Page
{
    CommBO bo = new CommBO();
    string flag = string.Empty;// 标示符
    string InputValue = string.Empty;//输入值
    string ReturnStr = string.Empty;//xml

    // 页面加载事件
    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            flag = Request.QueryString["flag"] ?? "";//查询条件标示符
            InputValue = Request.QueryString["InputValue"];//输入值
            AutoCompletXML();//填充xml
            HttpContext.Current.Response.ContentType = "text/xml";
            HttpContext.Current.Response.Charset = "GB2312";
            HttpContext.Current.Response.Clear();
            HttpContext.Current.Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);//禁用本地缓存
            HttpContext.Current.Response.Cache.SetNoStore();
            HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
            HttpContext.Current.Response.Write( ReturnStr);
            HttpContext.Current.Response.End();
        }
        catch
        { ; }
    }
    // 填充xml
    private void AutoCompletXML()
    {
        try
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            DataSet ds = new DataSet();
            int intRowCount = 10;//默认自动完成显示最大行数
            intRowCount = Convert.ToInt32(ConfigurationManager.AppSettings["AutoCompleteRowCount"].Trim());
            if (flag.Equals("1"))
            {
                dict.Add("@" + ConstMessage.TABLE_FIELD_NAME.Product.PRODUCTCODE ,"%" + InputValue +"%");
            }
            else if (flag.Equals("2"))
            {
                dict.Add("@" + ConstMessage.TABLE_FIELD_NAME.Product.PRODUCTNAME ,"%"+ InputValue +"%");
            }
            else
            {
                return;
            }
            //执行数据库操作
            ds = bo.GetByProduct(dict,intRowCount);
            ReturnStr = ds.GetXml();//生成xml
        }
        catch
        {
            ReturnStr = string.Empty;
        }

    }
}

 

3。使用页面,对应的页面控件

----添加js引用

----页面添加控件

<div>
        <asp:TextBox ID="txtProductCode" runat="server" CssClass="text_Mandatory" MaxLength="25"
            AutoCompleteType="Disabled"></asp:TextBox>
        <asp:TextBox ID="txtProductName" runat="server" CssClass="text_ProductName" MaxLength="30"
            AutoCompleteType="Disabled"></asp:TextBox>
    </div>

---cs中为txtbox添加js事件

 this.txtProductCode.Attributes.Add("onkeyup", "findNames('" + this.txtProductCode.ClientID + "','" + this.txtProductName.ClientID + "','1');");
        this.txtProductName.Attributes.Add("onkeyup", "findNames('" + this.txtProductName.ClientID + "','" + this.txtProductCode.ClientID + "','2');");
        this.txtProductCode.Attributes.Add("onblur", "lostfocus(this);");
        this.txtProductName.Attributes.Add("onblur", "lostfocus(this);");

4。数据库调用层根据编码或名称的模糊查询略