类似百度的搜索框的下拉的匹配使用最简单的方式

在做项目的时候，需要用到那种模糊查询的时候了，但是使用模糊查询循环的查询数据仿佛显得不是那么的现实，也就从网上找了一下资源，看了几个不错的例子，挑出了我最欣赏的一个例子来解析一下吧。
我们使用的是jQuery Autocomplete插件

需要引入JQuery-UI的js和css等

<!-- 引入jQuery UI的css文件 -->
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
<!-- 引入jQuery的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>

然后发布一段Html代码

<label for="language">请输入指定的语言：</lable>
<input id="language" name="language" type="text">

然后是手写的js部分，也是最重要的部分

	$("#language").autocomplete({
	    // 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值
	    source : availableTagsJSON,
	    select: function(event, ui){
	        // 这里的this指向当前输入框的DOM元素
	        // event参数是事件对象
	        // ui对象只有一个item属性，对应数据源中被选中的对象
	        $(this).value = ui.item.label;
	        document.getElementById("language").innerHTML = ui.item.value;
	        
	        
	        // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
	        event.preventDefault();
	    }
	});

返回的数据格式一定得是json对象，也就是类似这个样子的数据[{name:xxx,value:xxx},{name:xxx,value:xxx},{name:xxx,value:xxx}]，对象数据，对象数据，对象数据，重要的事情说三遍。
所以，如果后台使用@ResponseBody返回的json数据的话，需要转型，

var jsonstr = JSON.stringify(result);//转换为json字符串
			var jsonObj=JSON.parse(jsonstr);//转换为json对象
			availableTagsJSON = jsonObj;

然后把 对象赋值给source ，
之后就能够正常的使用了，有时候需要不同的2个参数，也是可以的，就是lable的值和value的值不同，但是这个时候就需要禁用他的默认行为了。

 // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
	        event.preventDefault();

呐，这就完成了