jqueryui autocomplete结合AJAx实现自动补全

最新推荐文章于 2021-03-19 09:56:15 发布

洋葱花瓣

最新推荐文章于 2021-03-19 09:56:15 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/u012151597/article/details/77949565

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jqueryui autocomplete结合AJAx实现自动补全

1、项目中有需要会需要用到输入框自动补全功能，类似于企业名，药店名称等等。jqueryui autocomplete就可以实现这个功能。 jquery ui AutoComplete 官网地址：http://jqueryui.com/autocomplete/效果如下图所示：下面来使用 autocomplete插件来实现类似效果。代码如下所示：<!doctype html><html
复制链接

扫一扫