如何在 Jquery、Laravel 中为动态输入自动完成答案

【问题标题】：How to do autocomplete for Dynamic Inputs in Jquery, Laravel如何在 Jquery、Laravel 中为动态输入自动完成
【发布时间】：2017-06-08 11:59:15
【问题描述】：

我在 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>

【问题讨论】：

标签： javascript php jquery json autocomplete

【解决方案1】：

此示例向您展示如何使用自动完成功能。

https://jqueryui.com/autocomplete/ 是实现“自动完成”的绝佳资源。

<!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>

【讨论】：