可模糊查询输入框(仿百度搜索栏)

最新推荐文章于 2024-09-12 10:42:05 发布

紫菜中毒

最新推荐文章于 2024-09-12 10:42:05 发布

阅读量3.6w

点赞数 9

分类专栏： Div+Css Jquery demo功能组件文章标签：博客 jQuery 前端模糊查询 javascript

本文链接：https://blog.csdn.net/u014492334/article/details/51733834

版权

Jquery 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

demo功能组件

2 篇文章 0 订阅

订阅专栏

Div+Css

1 篇文章 0 订阅

订阅专栏

很早之前做了个通用版的，当时做的时候有个初步的想法。

1.键盘每输入一个字母触发一次（onkeyup触发事件）
2.设置一个隐藏框<div></div>（div的css样式display设为none 设置宽高定好位置）
3.每次触发（onkeyup)更改div的display为block

js: document.getElementById(“div的id”).style.display="block"

jq: $("#id").css("dispaly","block");
同时获取文本框值document.getElementById(“input的id”).value赋给一个变量
4.用ajax后台连接数据库显示出（echo）和你输入的字符匹配的数据放到一个表格里

就是目标<div><table></table></div> table设样式；当然也可以用<div><ul><li></li></ul></div> 都行

5.把返回的http.responseText写入到div框中document.getElementById(“div的id”).innerHTML=http.responseText

我用的js写法的初级ajax

6、只做了鼠标事件，键盘事件没做（想要的自己搞）

先看下效果：

这个时候要注意样式中有个属性overflow-x:hidden; 可以消除x轴的状态栏。为什么说这个呢，因为我是自学前端的，所以有些css属性不是很了解被这个坑过就蛮提一下。还有一个就是弹层要注意 z-index:1000;这个设置高一点，要不然会被其他控件遮挡掉。

废话不说了，上源码

样式：

#div_EmpNo
        {
            position: absolute;
            border: 1px solid #abcee4;
            width: 175px;
            height: 200px;
            overflow: auto;
	    overflow-x:hidden;
            display: none;
            background: #f7f7f7;
	    line-height: 1.5em;
            font-size: 11px;
            clear: both;
            z-index: 9999;
        }
/*模糊查询弹层table中title 行 一列 两列等*/
        .dialogTitle
        {
            background-color: #E6E6FA;
            float: left;
            display: block;
            height: 20px;
            width: 50%;
            cursor: default;
            font-size: 110%;
        }
        .dialogTitle1
        {
            background-color: #E6E6FA;
            height: 20px;
            width: 100%;
            float: left;
            display: block;
            cursor: default;
            font-size: 110%;
        }
/*模糊查询弹层table简单样式*/
.gridtable
        {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            border-collapse: collapse;
            width: 200px;
            cursor: pointer;
	    cellspacing:0;
        }
/*未查询到数据提示*/
.dialogHint
        {
            background-color: #E6E6FA;
            height: 20px;
            width: 200px;
            float: left;
            display: block;
        }

Html:前端的改成 input输入控件就行，这边服务器控件只是方便后端存取数据。autocomplete="off" 禁止历史输入

重点 onkeyup事件就可以了

<div id="div_EmpNo"></div>
    <div class="contentContainer">
        <asp:TextBox ID="TextBox_STORE_NUMBER" runat="server" MaxLength="40" CssClass="pub_clsInputEdit TextBoxElement STORE_NUMBER elementDisplayYes"
            οnkeyup="GetStoreInfo()" autocomplete="off"></asp:TextBox></div>

js+jq代码（有时候写纯js太累，就偶尔混着用），下面第一个是比较早之前写的有些不完善地方，后面补了些坑。

function GetStoreInfo()
        {
            var showDiv=document.getElementById ("div_EmpNo");
            var etest = document.getElementById("<%=TextBox_STORE_ACCOUNT.ClientID%>").value.trim();
            if (etest == '' || etest == 'null' || etest == undefined) {
                document.getElementById("div_EmpNo").style.display = "none";
            } else {
                document.getElementById("div_EmpNo").style.display = "block";
            }    
             //控制弹层和输入框相对位置
            var height = $('#<%=TextBox_STORE_ACCOUNT.ClientID%>').height();
            var X1 = $('#<%=TextBox_STORE_ACCOUNT.ClientID%>').offset().left;
            var Y1 = $('#<%=TextBox_STORE_ACCOUNT.ClientID%>').offset().top;
            showDiv.style.position = "absolute";
            showDiv.style.left = X1 + "px";
            showDiv.style.top = Y1 + height + 8 + "px";
            ClearStoreData();
            var XMLHttp=false;
            showDiv.innerHTML="";
            if(window.ActiveXObject)
            {
                XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
               XMLHttp=new XMLHttpRequest(); 
            }
            
            if(!XMLHttp && typeof XMLHttpRequest!='undefined!')
            {
                XMLHttp=new XMLHttpRequest();
            }
            
            XMLHttp.onreadystatechange=function()  
            {  
                if(XMLHttp.readyState==4)  
                {  
                    if(XMLHttp.status==200)
                    {  
                        showDiv.innerHTML= XMLHttp.responseText;  
                    }
                }
            }
            var sql=document.getElementById("<%=HiddenStoreSql.ClientID%>").value;
            var funType="GetStoreNoInfo";
            var url = "ServerData.ashx?Applyer=" + escape(etest) + "&strsql=" + escape(sql) + "&fun=" + escape(funType) + "&id=" + new Date().getTime(); 
            XMLHttp.open("get",url,true);  
            XMLHttp.setRequestHeader("Content-Type","text/xml");  
            XMLHttp.send(null);
        }

补了些坑之后的代码：

function GetStoreInfo()
        {
            var showDiv=document.getElementById ("div_EmpNo");
            var etest = document.getElementById("<%=TextBox_STORE_NUMBER.ClientID%>").value.trim();
            if (etest == '' || etest == 'null' || etest == undefined) {
                showDiv.style.display = "none";
                return false;
            } else {
                showDiv.style.display = "block";
            }    
            //控制弹层和输入框相对位置
            var height = $('#<%=TextBox_STORE_NUMBER.ClientID%>').height();
            var X1 = $('#<%=TextBox_STORE_NUMBER.ClientID%>').offset().left;
            var Y1 = $('#<%=TextBox_STORE_NUMBER.ClientID%>').offset().top;
            showDiv.style.position = "absolute";
            showDiv.style.left = X1 + "px";
            showDiv.style.top = Y1 + height + 8 + "px";
            showDiv.innerHTML="";//清空原先数据，动态获取最新数据
            $("input[id*=TextBox_STORE_NAME]").val('');
            var XMLHttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
            XMLHttp.onreadystatechange=function(){  
                 if(XMLHttp.readyState==4 && XMLHttp.status==200){   
                     showDiv.innerHTML= XMLHttp.responseText;  
                 }
            } 
            var sql=document.getElementById("<%=HiddenStoreSql.ClientID%>").value;
            var funType="GetStoreNoInfo";
            var url = "ServerData.ashx?Applyer=" + escape(etest) + "&strsql=" + escape(sql) + "&fun=" + escape(funType) + "&id=" + new Date().getTime(); 
            XMLHttp.open("get",url,true);  
            XMLHttp.setRequestHeader("Content-Type","text/xml");  
            XMLHttp.send(null);
        }

有些东西要为初学者解释一下，我就被自己坑很多次

if (etest == '' || etest == 'null' || etest == undefined) {
                document.getElementById("div_EmpNo").style.display = "none";
                return false;
            } else {
                document.getElementById("div_EmpNo").style.display = "block";
            }

加了return false；减小资源浪费空格的时候就不查询，免得输入框连续空格。。。，

var etest = document.getElementById("<%=TextBox_STORE_NUMBER.ClientID%>").value.trim();

获取关键字信息空格还是清除一下的；

var height = $('#<%=TextBox_STORE_NUMBER.ClientID%>').height();
            var X1 = $('#<%=TextBox_STORE_NUMBER.ClientID%>').offset().left;
            var Y1 = $('#<%=TextBox_STORE_NUMBER.ClientID%>').offset().top;

这段是为了获取输入框的高度还有它位置就是css top left的值,说到这个值就有必要再唠叨一下。上面是jq写法

js写法

document.getElementById("<%=TextBox_STORE_NUMBER.ClientID%>").offsetLeft; 就是css left的值

<pre name="code" class="javascript">document.getElementById("<%=TextBox_STORE_NUMBER.ClientID%>").style.left;基本上这两个取到的值是一样

但是有一点要注意style.left是读写 offsetLeft只能读; style.left的到结果是字符串比如20px，而offsetLeft得到的数值是20 可以直接计算的；style.left要获取值只能在html中定义，才有值如上面的代码。因为css那边先定义 left：xx px；未在html页面上给style.left=xx+'px';操作，则获取到的值为空；

showDiv.style.position = "absolute";
            showDiv.style.left = X1 + "px";
            showDiv.style.top = Y1 + height + 8 + "px";
            showDiv.innerHTML="";
            $("input[id*=TextBox_STORE_NAME]").val('');

给层绝对定位在模糊查询框左下方，最后一行代码是模糊查询带出值清空其他栏位的。

var XMLHttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
            XMLHttp.onreadystatechange=function(){  
                 if(XMLHttp.readyState==4 && XMLHttp.status==200){   
                     showDiv.innerHTML= XMLHttp.responseText;  
                 }
            }

根据ajax操作不同阶段可以再不同状态码下做相应操作，比如404找不到页面等

var sql=document.getElementById("<%=HiddenStoreSql.ClientID%>").value;
            var funType="GetStoreNoInfo";
            var url = "ServerData.ashx?Applyer=" + escape(etest) + "&strsql=" + escape(sql) + "&fun=" + escape(funType) + "&id=" + new Date().getTime(); 
            XMLHttp.open("get",url,true);  
            XMLHttp.setRequestHeader("Content-Type","text/xml");  
            XMLHttp.send(null);

sql是查询语句我通过后台访问数据库包获取的这个不管只要知道是查询语句有个where等你的关键字就行

ajax get的方法会缓存所以加个时间new Date.getTime()去除缓存。ajax get post的区别，下次有空再说了

后端接收传值查询返回结果以下示例是 .net 一般处理程序.ashx与前台的交互

string etest = context.Request.QueryString["Applyer"];
            string p_sql = context.Request.QueryString["strsql"];

            int num = Convert.ToInt32(context.Request.QueryString["formNo"]);
            string FunType = context.Request.QueryString["fun"];

if (FunType == "GetStoreNoInfo")
            {
                sqlStr = string.Format(p_sql, etest);
                DataSet ds = new Facade.SFFORM077().ExecuteQuery(sqlStr);
                StringBuilder strBuild = new StringBuilder();
                if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)
                {
                    strBuild.Append("<table id=\"tableShow\" class=\"gridtable\" ");
                    strBuild.AppendFormat("<tr><div class=\"dialogTitle\">" + title1 + "</div><div class=\"dialogTitle\">" + title2 + "</div></tr>");
                    foreach (DataRow dr in ds.Tables[0].Rows)
                    {
                        strBuild.Append("<tr  id='" + dr["VALUE"] + "' οnmοuseοver=\"this.bgColor='#FAEBD7'\" οnmοuseοut=\"this.bgColor=''\"  οnclick=\" ClickStoreNo(this)\" >");
                        strBuild.AppendFormat("<td >{0}</td> ", dr["VALUE"].ToString());
                        strBuild.AppendFormat("<td >{0}</td> ", dr["DISPLAY"].ToString());
                        strBuild.Append("</tr>");
                    }
                    strBuild.Append("</table>");
                }
                else
                {
                    strBuild.Append("<div class=\"dialogHint\">未匹配到相关数据！</div>");
                }
                context.Response.Write(strBuild.ToString());
                context.Response.End();
            }

前台的这句就是接收返回的数据

if(XMLHttp.readyState==4 && XMLHttp.status==200){   
                     showDiv.innerHTML= XMLHttp.responseText;  
                 }

当然mouseover out等事件可以不写在里面 另外独立写也行 就不多说了。显示两列数据什么的自己改改就行了，拼接多写一两句就行了（当然拼接的也可以通过xml文件来传）

<pre name="code" class="csharp">οnclick=\" ClickStoreNo(this)\"

后端添加的这个事件是获取目标行点击事件，

<pre name="code" class="javascript">function ClickStoreNo(obj)
        {
            var id=$(obj).attr("id");
            var storeAccount=$(obj).children("td").eq(0).text();
            document.getElementById("<%=TextBox_STORE_NUMBER.ClientID %>").value = storeAccount; 
            document.getElementById("div_EmpNo").style.display = "none";
        }

大概就是这样了。。。路过的大神不要鄙视我。。。