jqueryui autocomplete结合AJAx实现自动补全

来源：互联网发布：vk俄罗斯社交软件编辑：程序博客网时间：2024/06/04 18:28

1、项目中有需要会需要用到输入框自动补全功能，类似于企业名，药店名称等等。jqueryui autocomplete就可以实现这个功能。
jquery ui AutoComplete 官网地址：http://jqueryui.com/autocomplete/

效果如下图所示：
这里写图片描述
下面来使用 autocomplete插件来实现类似效果。
代码如下所示：

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>jQuery UI Autocomplete - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.9.1.js"></script>  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">  <style>  .ui-autocomplete-loading {    background: white url("http://jqueryui.com/resources/demos/autocomplete/images/ui-anim_basic_16x16.gif") right center no-repeat;  }  </style>    <script>  $( function() {    $("#companyid").autocomplete({            minLength: 5,  //满足搜索的最小长度          source: function( request, response ) {              $.ajax({                url: "/onWay/getCompanyName",                type : "post",                  dataType : "json",                 data: {                    companynm : $("#companyid").val()                },                success: function( data ) {                  response( $.map( data.company, function( item ) {                    return {                      label: item.companynm,                      value: item.id                    }                  }));                }              });            },            select: function( event, ui ) {                 //设置输入框值                 $("#companyid").val( ui.item.label );                 //设置id值                 $("#company_id").val(ui.item.value);                 return false;            }          });  } );  </script></head><body><input type="text" id="companyid" name="companyid" value="" filterType="="></input><input type="hidden" id="company_id" ></body></html>

阅读全文

0 0