基于Jquery-ui的自动补全
2014-10-26 15:54
190 查看
1、添加CSS和JS引用
2、在某些使用DIV并设置了z-index的页面里使用可能需要重写css的内容
3、页面初始化后绑定事件
后台返回给前台的是一个如下结构的对象list
4.HTML代码
达到的结果是在VIP信息员编码上输入超过2个数字后提示与之匹配的信息员的 编码,名字,电话号码 信息提示框 供选择,选择完成后自动填充名字的input。
更多详细的用法请参考Jquery-ui的官方文档
<script type="text/javascript" src="javascript/jquery-1.7.min.js"></script> <link rel="stylesheet" href="javascript/menuui/jquery-ui.css" > <script src="javascript/autocomplete/jquery.ui.core.js"></script> <script src="javascript/autocomplete/jquery.ui.widget.js"></script> <script src="javascript/autocomplete/jquery.ui.position.js"></script> <script src="javascript/autocomplete/jquery.ui.menu.js"></script> <script src="javascript/autocomplete/jquery.ui.autocomplete.js"></script>
2、在某些使用DIV并设置了z-index的页面里使用可能需要重写css的内容
<style type="text/css"> .ui-autocomplete{ display:block; z-index:99999; width: 200px; } </style>
3、页面初始化后绑定事件
$( "#vip_code" ).autocomplete({ source: function(request, response){ $.ajax({ type : "POST", url :"<%=basePath%>" + "/xfz/customer.do", data : "action=autoSearch&key="+$("#vip_code").val(), dataType : "json", success : function(jsonObj) { response(jsonObj); } }); }, minLength:2, //至少得有2个字符才能触发自动匹配的动作 select: function( event, ui ) { $("#customer_name").val(ui.item.name); } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a style='font-size:12px;font-family: 微软雅黑;'>" + item.value + "," + item.name + "," + item.mobilephone + "</a>" ) .appendTo( ul ); };
后台返回给前台的是一个如下结构的对象list
public class CustomerAutoInfo { //value is key value(vipcode/username) private String value; private String name; private String mobilephone; public String getValue() { return value; } public void setValue(String value) { this.value = value; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getMobilephone() { return mobilephone; } public void setMobilephone(String mobilephone) { this.mobilephone = mobilephone; } }
4.HTML代码
VIP信息员编码 <input type="text" id="vip_code" onkeydown='return checkNum()' style="ime-mode:Disabled" onpaste="return !clipboardData.getData('text').match(/\D\./)" ondragenter="return false" class="searchinput" /> <label for="customer_name" style="width: 100px;text-align: right;">消费者姓名</label><input type="text" id="customer_name" onkeydown="if(event.keyCode==32) return false" class="searchinput" />
达到的结果是在VIP信息员编码上输入超过2个数字后提示与之匹配的信息员的 编码,名字,电话号码 信息提示框 供选择,选择完成后自动填充名字的input。
更多详细的用法请参考Jquery-ui的官方文档
相关文章推荐
- jQuery UI基础----8jQuery UI Widgets-AutoComplete(自动补全
- 基于jquery实现的自动补全功能
- 基于jquery的自动补全自己手写的
- jqueryui autocomplete结合AJAx实现自动补全
- JqueryUI AutoComplate实现文本框搜索,自动补全效果
- 基于jquery的自动补全
- Jquery李炎恢——42自动补全UI【8】
- 基于JQuery和DWR的自动补全
- Jquery李炎恢——43邮箱自动补全UI【9】
- 基于jQuery的autocomplete(自动补全)类
- 用jquery-ui Autocomplete一步一步实现输入自动补全
- 基于jquery实现的自动补全功能
- 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全
- JQuery UI autocomplete自动补全插件搜索结果去除提示
- 基于JQuery和DWR的自动补全
- 基于jquery实现输入框的自动补全功能
- 基于jquery的自动补全自己手写的
- jquery-ui输入框自动补全(实用)
- jQuery UI AutoComplete 自动完成使用小记
- jquery输入框自动补全