HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/autocomplete_tyres.js"></script>
<script src="../../assets/js/autocomplete_client.js"></script>
<!-- Turn on tooltips -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- /Turn on tooltips -->
</head>
<body>
<?php include_once('../../libs/navbar.php');
$page = __FILE__; ?>
<div class="container-fluid">
<div class="row">
<?php include_once('../../libs/sidebar.php'); ?>
<div class="col-md-10 body-main"><!-- container body-main -->
<form action="../../libs/orders/exec_add.php" method="POST" onsubmit="return confirm('Jesteś pewny, że podane dane są prawidłowe i chcesz wysłać zamówienie?');"><!-- form oder add -->
<div class="row">
<div id="products" class="col-md-12 form-group">
<h4>Produkty</h4>
<div class="col-md-2 form-group">
<input onclick="select()" type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID">
<input onclick="select()" type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required>
<input onclick="select()" type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required>
<input onclick="select()" type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required>
<input onclick="select()" type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT">
<input onclick="select()" type="number" class="form-control" placeholder="Ilość sztuk" name="numberPieces[]" id="numberPieces" required>
<input onclick="select()" type="number" class="form-control" placeholder="Cena za sztukę" name="pricePiece[]" id="pricePiece" required>
<button type="button" id="btnAddProduct" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Dodaj inny rozmiar opony"><i class="fa fa-plus"></i> Dodaj</button>
</div>
</div>
<script src="../../assets/js/addproductbox.js"></script>
</div>
addproductbox.js
$(document).ready(function() {
var max_fields = 6; //maximum input boxes allowed
var wrapper = $("#products"); //Fields wrapper
var add_button = $("#btnAddProduct"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if(x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="col-md-2 form-group">' +
'<input onclick="select()" type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID">' +
'<input onclick="select()" type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required>' +
'<input onclick="select()" type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required>' +
'<input onclick="select()" type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required>' +
'<input onclick="select()" type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT">' +
'<input onclick="select()" type="number" class="form-control" placeholder="Ilość sztuk" name="numberPieces[]" id="numberPieces" required>' +
'<input onclick="select()" type="number" class="form-control" placeholder="Cena za sztukę" name="pricePiece[]" id="pricePiece" required>' +
'<button href="#" class="btn btn-danger remove_field"><i class="fa fa-times"></i> Usuń</button>' +
'</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
autocomplete_tyres.js
$(function() {
var tyreSizes = [
"10.00 R15",
"10.00-20",
"10.5-20",
"10R17.5",
"10R20",
"10R202",
"10R22,5",
"10R30",
"10R40",
"10R50",
"10R60",
"11 R 24,5",
"11.00 R20",
"11/70R22,5",
];
$(".tyreSize").autocomplete({
source: tyreSizes
});
var tyreManufacturers = [
"Accelera",
"Achilles",
"Admiral",
"Alpha",
"Ambassador",
"America",
"Amtel",
"Anli",
"Antarktika",
"Arctic",
"Arktic",
"Arrowspeed",
"Aurora",
"Autogrip",
"Avon",
"Axxium",
"Bargum",
"Bar-gum",
"Barum",
"Bd",
"Beep",
"Berliner",
"BFGoodrich",
"Black howk",
"Bridgestone",
];
$(".tyreManufacturer").autocomplete({
source: tyreManufacturers
});
var tyreTreads = [
"60",
"65",
"190",
"202",
"330",
"350",
"380",
"620",
"660",
"2000",
"3000",
"4000",
"42067",
"...V71",
"165/80R14",
"185/60R14",
"185/70R14",
"190 DIREZIONALE",
"190 SNOW SPORT WINTER",
"190 V-CT22",
"195/65R15",
"2000 + T 70",
"2000 SPORT",
"2000 T 70",
"2000 T 80",
"2000 T65",
"2000 T80",
"2000DS165",
"2001 PERFORMANCE",
"200T80",
"210 SNOW SPORT WINTER",
"210SNOW SPORT",
];
$(".tyreTread").autocomplete({
source: tyreTreads
});
});
所以HTML中的代码只是简单的命令。一开始你得到一个几乎没有输入的div，很少有自动完成帮助我的同事选择tyreSize，tyreManufacturer和tyreTread。在HTML文件中添加的第一个div具有工作自动完成功能，但其他人添加了动态，jQuery显示自动完成功能不能正常工作。 Some1需要帮忙吗？
解决： Enabling jQuery Autocomplete on dynamically created input fields
答案 0 :(得分：0)
已解决：在动态创建的输入字段上启用jQuery自动完成