jquery-ui-autocomplete的使用

开始，我当初使用这个插件的时候没有想到会有这么多的困难，因为网上各种改版或者使用方法都是前篇一律（大部分都讲本地数据，而从服务端获取动态数据则一带而过）

所以，我写了这篇博文，以及提供插件下载。

以下，是我实现该功能的代码

<script type="text/javascript">
	$(function () {

		$("#<%=txtStudent.ClientID %>").autocomplete({
			source: function (request, response) {
				var userId = $("#<%=txtStudent.ClientID %>").val();
				$("#<%=hidUserID.ClientID %>").val("");
				$.ajax({
					type: "POST",
					dataType: "json",
					url: "doAction.aspx?Action=autocomplete&Content=" + userId, //userId,动态参数可以这样传，还可以用内置的对象传参
					data: {
						maxRows: 12
					},
					success: function (data) {

						if (data.length > 0) {

							response($.map(data, function (item) { //这里调用map函数对数据进行格式化处理
								return {
									label: item.userNm,   //这个userNm是后台传输的json中的key
									value: item.userNm,
									id: item.userId      //这个userId是后台传输json中的key
								}
							}));//最终返回的对象是下拉列表的内容，label，value，id都是item的属性
						} else {
							$("#<%=hidUserID.ClientID %>").val("");
						}
						//alert(response); //response(data);
					}
				});
			},
			minLength: 1,
			width: 150,
			scrollHeight: 200,   //提示的高度，溢出显示滚动条

			select: function (event, ui) {
				$("#<%=hidUserID.ClientID %>").val(ui.item.id);  //选中下拉列表值触发的函数 ，给一个隐藏控件这个选中选项的id属性值
            }
		});
	})
</script>

下面是插件下载链接

jquery-ui-autocomplete