我正在研究將產品添加到數據庫的代碼。
在我的表格中,我有動態字段來一次保存更多產品。
我在論壇上發現了一個爲用戶輸入數據創建sugestions的JS腳本,問題與JS代碼有關。
用戶搜索的所有數據都存儲在mysql中。動態字段上的自動完成 - 顯示用戶對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 } } ?>
爲多個輸入字段提供代碼可能是您混合了字段ID –
只是警告您您很容易受到SQL注入攻擊嘗試查看如果輸入自動完成字段處的引號(例如:')他的方式,一個陌生人可以讀你的整個數據庫。 – thepieterdc
我添加了外部.js文件。工作正常。我現在不在乎sql注入。這個應用程序只用於內部use.after我讓它工作正常,我會做安全 –