标签:
直接看代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.10.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.menu.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script> <link rel="stylesheet" href="../demos.css"> <body> <script type="text/javascript"> $(function() { //可以实现点击文本框就进行查询,但是需要和后台进行配合, //首先需要是一个模糊查询,当输入空格时查询出所有数据 $(‘#id‘).autocomplete({ source:function(request,response){ $.ajax({ type:"post", url:"<c:url value=‘/getDeviceName‘/>‘", dataType:"json", data{ deviceName:request.term }, success:function(data){ response($.map(data,function(item){ return { lable:item.deviceName, value:item.deviceName } })); } }); }, minLength: 1, delay:0, autoFocus:true //是否自动默认选中下拉列表第一项,默认为false,即不选中 select:function(event,ui){ //键盘上下键移动,将选中的值放入到搜索框中 $("#id").val(ui.item.deviceName); } }); }).focus(function(){ //根据版本不同使用下面的两个方法,其实是玩了个障眼法,在这里当文本框获取焦点时,输入个空格进行模糊查询 //后台做了判断,如果输入的值前后都去了空格,如果输入空格,后台接收数据就为null,则此时就默认按照所有进行查找,即like %% //本身这个也是sql自身的特性,但是一下两句话在不同版本中使用,上面不行,用下面,下面不行用上面 //$(this).data("autocomplete").search(" ")); $(this).data("uiAutocomplete").search(" "); }); </script> <input type="text" id="id" name="deviceName"> </body> </html>
jquery ui autocomplete 实现点击文本框,出现所有查询信息效果
标签:
原文地址:http://www.cnblogs.com/qq931399960/p/4554333.html