一:需求
要实如下输入框可支持模糊查询,查询字符串:“nick”。
二:实现原理
给输入框绑定keyup事件,然后ajax请求,带输入的参数去后台数据库拿出数据再返回到页面。
三:分析
1),ajax 请求设置成同步。
performance会不好,因为是同步,所以当你输入"n" 时就会发出一次ajax请求,而且这个时候输入框不能再输入字符,必须等第一次请求结束后才能继续输入"i"。当然这个时候返回来的数据肯定是正确的。
1),ajax 请求设置成异步。就不必担心一次只能输入一个字符了,可以一次性输完。这个时候也是发出了四次ajax 请求。”n“,"ni","nic","nick"分别发了一次ajax请求。现在问题来了:如果代码是下面这样的话,就会有问题。
$("[name='searchkey']").keyup(function(){ var inputName = this.value; var existSelectUser = "false"; if($("#selectSCNames").find("option").length>0){ existSelectUser = "true"; } $.ajax({ url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser", data:{ "inputName":inputName, "existSelectUser":existSelectUser }, async:true, dataType:"JSON", type:"POST", success:function(result){ $("#showDiv").html(result.matchedUsers); } }); });
发现输入”nick“后查询到的结果不正确。
原因是什么呢:看下面的图片,
其实由代码可以看出,其实拿的是最后一次请求的返回数据。但是由于四次请求的时间各不相同,虽然”n“和”ni“首先被触发,但是他们用的时间都比”nic“和”nick“多,所以最后拿的数据是请求时间最多的那次ajax请求返回来的数据,也就是”ni“这个请求的数据。而我们输入的字符串是”nick“。所以会出现数据不匹配的问题。
如何解决呢??
使用如下代码的话就可以正常work了。
var datas = new Array(); var i = 0; $("[name='searchkey']").keyup(function(){ i++; var inputName = this.value; var existSelectUser = "false"; if($("#selectSCNames").find("option").length>0){ existSelectUser = "true"; } $.ajax({ url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser", data:{ "inputName":inputName, "existSelectUser":existSelectUser, "index":i }, async:true, dataType:"JSON", type:"POST", success:function(result){ var index = result.index; var ind = index-1; datas[ind] = result.matchedUsers; $("#showDiv").html(datas[i-1]); } }); });
分析:
1:此处创建了一个数组和一个index。
2:每触发一次keyup,index加1。
3:每次请求时,带着index,作为一个参数。
4,:返回传进去的index。
5,将返回数据塞进数组的第index个位置。
6,取数组最后一个位置的数据。
为什么取的数据会是正确的呢?
因为虽然”nick“是第四次触发keyup时间的,所以”i“ 是4,所以他请求时传进去的index是4,返回来的index也是4。虽然它是请求时间是最短的,但是他返回来的数据会被放到数组的第四个位置上。其实不管”nick“ 的请求时间是排第几位,因为他是第四次触发keyup事件的,所以他请求时传进去的index是4,所以他这个请求返回来的数据都会被塞到数组的第四个位置上。所以就不会出现查询出的数据不正确的问题了。