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

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

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"
onkeyup="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.F
aa94
ormat(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"] + "' onmouseover=\"this.bgColor='#FAEBD7'\" onmouseout=\"this.bgColor=''\"  onclick=\" 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">onclick=\" 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";
}

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