javascript - 动态字段上的自动完成 - 显示来自 mysql 对输入数据的用户建议

Question

我正在编写将产品添加到数据库的代码。
在我的表单中，我有动态字段可以一次保存更多产品。
我在论坛上发现了一个为用户输入数据创建建议的JS脚本，问题与JS代码有关。
我的所有用户搜索的数据都存储在mysql中。

编辑:我更改了部分代码，现在工作得更好，但有新的错误。
如果我一次添加更多字段，则建议列表仅显示到最后添加的输入，无论您使用哪个字段进行搜索(并且第一个字段无法搜索)。
如果我一次搜索一个字段，然后添加新字段并再次搜索，就可以了。
出了什么问题？

我的新HTML:

                    <!--tabel add rows-->
                    <div class="panel-body">
                        <div id="mobilier_fields"></div>
                        <div class="col-sm-5 nopadding">
                            <div class="form-group">
                                <input type="text" class="form-control" id="cod_mobilier" name="cod_mobilier[]">
                                <div id="suggesstion-box"></div>
                            </div>
                        </div>
                        <div class="col-sm-2 nopadding">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <button class="btn btn-success" type="button"  onclick="mobilier_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

JavaScript:

    //script for add dynamic fields
var room = 1;
function mobilier_fields() {
    room++;
    var objTo = document.getElementById('mobilier_fields')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass"+room);
    var rdiv = 'removeclass'+room;
    divtest.innerHTML = '<div class="col-sm-5 nopadding"><div class="form-group"> <input type="text" class="form-control" id="cod_mobilier'+ room +'" name="cod_mobilier[]"><div id="suggesstion-box'+ room +'"></div></div></div><div class="col-sm-2 nopadding"><div class="form-group"><div class="input-group"> <div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';

    objTo.appendChild(divtest)

    autoComplete();

}
function remove_education_fields(rid) {
    $('.removeclass'+rid).remove();
}



//script for sugestions
function autoComplete() {
    $("#cod_mobilier"+room).keyup(function(){
        $.ajax({
        type: "POST",
        url: "autocomplete.php",
        data:'keyword_autocomplete='+$(this).val(),
        beforeSend: function(){
            $("#cod_mobilier"+room).css("background","#FFF url(images/LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box"+room).show();
            $("#suggesstion-box"+room).html(data);
            $("#cod_mobilier"+room).css("background","#FFF");
        }
        });
    });
}


function selectprodus(val) {
$("#cod_mobilier"+room).val(val);
$("#suggesstion-box"+room).hide();
}

$("#cod_mobilier"+room).keyup(function(){
    autoComplete();
});

自动完成.php:

<?php
if(!empty($_POST["keyword_autocomplete"])) {
$query ="SELECT * FROM tbl_nomenclator WHERE cod_produs like '%" . $_POST["keyword_autocomplete"] . "%' OR descriere_produs like '%" . $_POST["keyword_autocomplete"] . "%' ORDER BY descriere_produs LIMIT 0,10";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="nomenclator-list">
<?php
foreach($result as $rezultat) {
?>
<li onClick="selectprodus('<?php echo $rezultat["cod_produs"]; ?>');"><?php echo $rezultat["cod_produs"]; ?> - <?php echo $rezultat["descriere_produs"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>

new image for exemplification

Answer 1

您正在通过 JS 在页面中添加 #search-box 元素。每次创建新输入字段时都必须将 keyup 事件附加到新输入字段。

注意: 1. 附加 keyup 事件的代码仅在页面启动时运行一次(即 $(document).ready(...);。 2. 将 keyup 事件附加到新的输入元素。 3. 您通过 ID 将 keyup 事件附加到元素。始终建议我们为元素设置一个唯一的 ID。 #search-box 始终将“keyup”事件附加到与 id 匹配的第一个元素(即搜索框)。