一：需求

要实如下输入框可支持模糊查询，查询字符串：“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","existSelectUser":existSelectUser,"index":i
				},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，所以他这个请求返回来的数据都会被塞到数组的第四个位置上。所以就不会出现查询出的数据不正确的问题了。