Question

我正在使用代码将产品添加到数据库中在我的表格中，我有动态字段，可以一次保存更多产品我在论坛上发现了一个JS脚本，它为用户输入数据创建了sugestions，问题与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();
});

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事件附加到新的input元素。 3.您正在通过ID将keyup事件附加到元素。始终建议我们应该为元素提供唯一的ID。 #search-box总是附加＆＃34; keyup＆＃34; event到匹配id的第一个元素（即搜索框）。

动态字段上的自动完成 - 显示来自mysql的用户sugestions以获取输入数据

1 个答案: