jq自动补全，输入框下面出现关键词搜索

效果图：

Css:

<!----自动补全银行卡代码，start------>
<style type="text/css">
   #word{
      position: absolute;
      z-index: 99;
      width: 145px;
      height: auto;
      background-color: white;
      border: black solid 1px;
      display: none;
      overflow:hidden;
   }
   .click_work{
      padding-bottom: 8px;
      font-weight:lighter;
      font-size: 13px;
      cursor:pointer;/*鼠标放上变成小手*/
   }
   .click_work:hover{
      color: orange;
      background-color: gray;
   }
   .error{
      color: gray;
      cursor:pointer;/*鼠标放上变成小手*/
   }

   #word2{
      position: absolute;
      z-index: 99;
      width: 180px;
      height: auto;
      background-color: white;
      border: black solid 1px;
      display: none;
      overflow:hidden;
   }
   .click_work2{
      padding-bottom: 8px;
      font-weight:lighter;
      font-size: 13px;
      cursor:pointer;/*鼠标放上变成小手*/
   }
   .click_work2:hover{
      color: orange;
      background-color: gray;
   }
   .error2{
      color: gray;
      cursor:pointer;/*鼠标放上变成小手*/
   }
</style>
<!----自动代码，end------>

Html:

<tr>
   <td style="text-align:center;">
          <input type="text" style="width:272px;" id="account_name" class="form-control-ele"  name="account_name"value="{$row.account_name}"/>&nbsp;
      <div id="word"></div>
   </td>
   <td style="text-align:center;">
      <input type="text" style="width:150px;" id="account_bank_name_short" class="form-control-ele"  name="account_bank_name_short" value="{$row.account_bank_name_short}"/>&nbsp;
   </td>
   <td style="text-align:center;">
      <input type="text" style="width:300px;" id="account_number" class="form-control-ele"  name="account_number"  value="{$row.account_number}"/>&nbsp;
      <div id="word2"></div>
   </td>
</tr>

Php：

elseif($_REQUEST['act'] == 'account_search')
{
    $wd = $_GET['wd'];

    //模糊搜索
    $account_rows = db_class::getAccountListSearch($wd);

    $return_data = [
        's'=>$account_rows,
    ];

    $json_str = json_encode($return_data);

    echo $json_str;
    exit;

}

Jq：

$(function(){
        //当键盘键被松开时发送Ajax获取数据
   $('#account_name').keyup(function(){

      var keywords = $(this).val();
      if (keywords=='') {
         $('#word').hide(); return
      };
      $.ajax({
         url: 'baoxiaoapply.php?act=account_search&wd=' + keywords,
         dataType: 'json',
         beforeSend:function(){
            $('#word').append('<div>正在加载。。。</div>');
         },
         success:function(data){
            $('#word').empty().show();
            if (data.s=='')
            {

               //$('#word').append('<div class="error">搜索不到  "' + keywords + '"</div>');
               $('#word').hide(); //return
            }

            $.each(data.s, function(){
               $('#word').append('<div class="click_work">'+ this +'</div>');
            })
         },
         error:function(){

            $('#word').empty().show();
            $('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
         }
      })
   })
        //点击搜索数据复制给搜索框
   $(document).on('click','.click_work',function(){
      var word = $(this).text();
      $('#account_name').val(word);
      $('#word').hide();

      $.ajax({
         url: 'baoxiaoapply.php?act=get_account_data&wd=' + word,
         dataType: 'json',
         beforeSend:function(){

         },
         success:function(data)
         {
            // console.log(data.s)

            // console.log(data.account_bank_name_short)
            // console.log(data.account_number)

            if (data.account_bank_name_short != '')
            {
               $('#account_bank_name_short').val(data.account_bank_name_short);
            }

            if (data.account_number != '')
            {
               $('#account_number').val(data.account_number);
            }

         },
         error:function(){

         }
      })
   })

})

Jq：

$(function(){
   //当键盘键被松开时发送Ajax获取数据
   $('#account_number').keyup(function(){

      var keywords = $(this).val();
      if (keywords=='') {
         $('#word2').hide(); return
      };
      $.ajax({
         url: 'xxxxx.php?act=account_search_number&wd=' + keywords,
         dataType: 'json',
         beforeSend:function(){
            $('#word2').append('<div>正在加载。。。</div>');
         },
         success:function(data){
            $('#word2').empty().show();
            if (data.s=='')
            {
               $('#word2').hide(); //return
               //$('#word2').append('<div class="error2">搜索不到  "' + keywords + '"</div>');
            }

            $.each(data.s, function(){
               $('#word2').append('<div class="click_work2">'+ this +'</div>');
            })
         },
         error:function(){

            $('#word2').empty().show();
            $('#word2').append('<div class="click_work2">Fail "' + keywords + '"</div>');
         }
      })
   })
   //点击搜索数据复制给搜索框
   $(document).on('click','.click_work2',function(){
      var word2 = $(this).text();
      $('#account_number').val(word2);
      $('#word2').hide();
   })

})

结束。