实现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。数据库调用层根据编码或名称的模糊查询略