实现textbox输入时模糊查询

原创 2010年08月10日 09:13:00

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
<stringobject> dict = new Dictionary<stringobject>();
            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。数据库调用层根据编码或名称的模糊查询略

相关文章推荐

C#WINFORM智能模糊匹配输入框

该文原址:http://blog.163.com/liran2001_81/blog/static/2416304020091125112622352/ C#WINFORM智能模糊匹配输入框.net2...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

章鱼哥出品_VB.NET ComboBox、 TextBox 实现自动完成、自动过滤 模糊查询的功能

本文以ComboBox为例讨论自动过滤功能,主要有两种方式:(TextBox也一样)   一、以AutoCompleteSource、AutoCompleteMode、AutoCompleteCus...

C#实现全局热键响应,失去焦点情况下响应全局快捷键的方法

C#实现全局热键响应,失去焦点情况下响应全局快捷键     1、引入API注册和注销热键的函数,建立一个类文件,命名为HotKey.cs,代码如下:using System; using Syst...

textEdit_Spin文本输入补全以及下拉框提示

public void getUserData()          { //此处对于自动补全功能没能实现,对于添加字符长度的限制亦未能实现 //     TextView text = (Te...

VB6对系统自带的TextBox控件的扩展实现模糊查询的功能

由于需要维护很多的VB代码,而这些代码中,

asp textbox 类似百度模糊查询功能

  • 2010年04月28日 08:42
  • 32KB
  • 下载

弹出下拉编辑控件,跟踪输入内容自动过滤查询,过滤条件完全自定义,支持TextBox,支持DataGridView(弹出查询对话框),支持DevExpress 8.2的TextEdit,Gridview

 控件功能强大,在逐字输入同时,根据自定义的查询条件弹出一个查询表格,显示符合的内容,同时可定为必选或可选,若定义必选,则必须查询结果唯一才能通过,同时可读取key值,基于DataGridView或G...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现textbox输入时模糊查询
举报原因:
原因补充:

(最多只允许输入30个字)