jQuery如何动态添加行时使用自动完成功能

Question

我正在尝试在动态添加的行上自动填充输入字段。但它会引发Uncaught TypeError: $(...).autocomplete is not a function的错误。

参考：http://jsfiddle.net/r08m8vvy/2/

HTML

<div class="section-content trip-content" >
    <div class="row">
        <form class="cn-form form-horizontal " onsubmit="return false" role="form" data-listing-id="">
            <input type="hidden" name="trip_id" value="">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details">
                <div class="col-md-4 col-xs-12 trip-details-mobile">
                    <input type="text" name="" placeholder="Trip ID" class="form-control consigner-trip-id" id="consignerTripDetails" autofocus>
                </div>
                <div class="col-md-4 col-xs-12 trip-details-mobile">
                    <input type="text" name="vehicle_no" placeholder="Vehicle No" class="form-control" readonly>
                </div>
                <div class="col-md-4 col-xs-12 trip-details-mobile">
                    <input type="text" name="load_type" placeholder="Load Type" class="form-control" readonly>
                </div>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details">
                <div class="col-md-12 col-xs-12 trip-details-mobile">
                    <textarea type="text" name="loading_supervisor" placeholder="Loading Supervisor" class="form-control" readonly></textarea>
                </div>   
            </div>
        </form>
    </div>
</div>

的jQuery

$("#addTripRows").click(function (e) {
    e.preventDefault();
    var tripDetailHTML = '<div class="row"><form class="cn-form form-horizontal" onsubmit="return false" role="form" data-listing-id=""><input type="hidden" name="trip_id" value=""><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details"><div class="col-md-4 col-xs-12 trip-details-mobile"><input type="text" name="" placeholder="Trip ID" class="form-control consigner-trip-id" id="consignerTripDetails" autofocus></div><div class="col-md-4 col-xs-12 trip-details-mobile"><input type="text" name="vehicle_no" placeholder="Vehicle No" class="form-control" readonly></div><div class="col-md-4 col-xs-12 trip-details-mobile"><input type="text" name="load_type" placeholder="Load Type" class="form-control" readonly></div></div><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details"><div class="col-md-12 col-xs-12 trip-details-mobile"><textarea type="text" name="loading_supervisor" placeholder="Loading Supervisor" class="form-control" readonly></textarea></div></div></form><button class="remove_field v2-button">Remove</button></div>';
  if(x < max_fields){ //max input box allowed
      x++; //text box increment
   $(wrapper).append(tripDetailHTML);
   $( "input[id="+ x +"]" ).autocomplete({
    source: availableAttributes
     }); 
  } 
});

$(wrapper).on("click",".remove_field", function(e){ 
   e.preventDefault(); 
   $(this).parent('div').remove(); 
    x--;
});

任何帮助都会很棒。提前谢谢。

Answer 1

确保在 $db = new PDO("sqlsrv:host=$hostdb;dbname=$dbname", $usr, $psw); 之前引用jQuery.min.js 。

jQuery-ui.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 依赖于Jquery框架。

Answer 2

首先你要解决类似的问题http://jsfiddle.net/r08m8vvy/140/

In the above jsfiddle I've removed the jQuery-ui, check the console.

您可以使用解决方案

You are missing jQuery-ui library

同时添加CSS和＆amp; JavaScript

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<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>

确保文件的顺序应该相同。

希望这会对你有所帮助。