如何在Jquery,Laravel中为动态输入自动完成

时间:2017-06-08 11:59:15

标签: javascript php jquery json autocomplete

我正在Laravel做账户项目。在付款输入屏幕中,我想使用自动完成功能在此屏幕中添加多个分类帐。我只根据id自动完成第一个字段。如何根据动态ID或建议任何好方法做剩余字段。

     <table class="table table-bordered" style="margin-bottom:0px;">
         <tr>
         <td width="50%">
        <input type="text" class="form-control boxed" name="transledger[]" id="transledger1" ></td>
         <td width="50%">
         <input type="text" class="form-control boxed" name="creditamt[]" id="creditamt1">
         </td>
         </tr>
    <tr>
         <td width="50%">
        <input type="text" class="form-control boxed" name="transledger[]" id="transledger2" ></td>
         <td width="50%">
         <input type="text" class="form-control boxed" name="creditamt[]" id="creditamt2">
         </td>
         </tr>

    <tr>
         <td width="50%">
        <input type="text" class="form-control boxed" name="transledger[]" id="transledger3" ></td>
         <td width="50%">
         <input type="text" class="form-control boxed" name="creditamt[]" id="creditamt3">
         </td>
         </tr>
    .......
...........
...........
..........
    </table> 

自动填充查询

 <script>

   $(document).ready(function() {

    src = "{{ url('searchajax') }}";
     $("#transledger1").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term
                },
                success: function(data) {
                    response(data);

                }
            });
        },
        minLength: 3,

    });
}); 



</script>

1 个答案:

答案 0 :(得分:0)

此示例显示如何使用自动完成功能。

https://jqueryui.com/autocomplete/是一个很好的资源来实现&#34;自动完成&#34;。

&#13;
&#13;
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials  =  [
               "Javascript",
               "Jquery",
               "Vue.js",
               "Meteor.js",
            ];
            $( "#automp" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "m" or "j"</p>
         <label for = "autocomp">Tags: </label>
         <input id = "automp">
      </div>
   </body>
</html>
&#13;
&#13;
&#13;