jquery-ui-autocomplete的使用

来源：互联网发布：java多线程例子编辑：程序博客网时间：2024/05/16 07:21

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

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

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

<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中的keyvalue: 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

0 0