邮件地址自动匹配筛选 jquery-ui ajax jQuery UI Autocomplete - Multiple, remote

骑猪看日落 2022-09-13 01:59 192阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiJ5Z2X6ZKxMDc5NA_size_20_color_FFFFFF_t_70_g_se_x_16][]

前端：

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Multiple, remote</title>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="https://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 src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() {
        function split( val ) {
          return val.split( /,\s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
     
        $( "#birds" )
          // don't navigate away from the field on tab when selecting an item
          .on( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            source: function( request, response ) {
              $.getJSON( "http://xxxxxxx:8181/fzadmin.php/yhl_mail_info/get_yhl_mail", {
                term: extractLast( request.term )
              }, response );
            },
            search: function() {
              // custom minLength
              var term = extractLast( this.value );
              if ( term.length < 2 ) {
                return false;
              }
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              // remove the current input 移除当前输入
              terms.pop();
              // add the selected item 添加选定的项目
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end 添加占位符以获取末尾的逗号和空格
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            }
          });
      } );
      </script>
    </head>
    <body>
     
    <div class="ui-widget">
      <label for="birds">Birds: </label>
      <input id="birds" size="50">
    </div>
     
     
    </body>
    </html>

tp5 fastadmin 控制器 里的一个方法

public function get_yhl_mail()
        {
    		if ($this->request->isGet()==null)
    		{
    			 return  $this->error('没有提交字段');;
    
    		}else{
    			
    			 
    			 $getterm = request()->get('term');
    			 //echo $getterm;
    			 //print_r(request()->get());
    			 $showmailinfo = Db::table('fa_yhl_mail_info')->where('value','like',"%{$getterm}%")->select(); //SELECT `value`  FROM `fa_yhl_mail_info` WHERE `value` like %peng%';
    			return json($showmailinfo);
    		}
    		
    		
        }

数据库 表字段

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiJ5Z2X6ZKxMDc5NA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiJ5Z2X6ZKxMDc5NA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c988bda1f76a49dbb4820eb9daf2a713.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiJ5Z2X6ZKxMDc5NA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/9a184732272c4f34b7e284b27d14f871.png