2017-05-24 30 views
0

我正在研究將產品添加到數據庫的代碼。
在我的表格中,我有動態字段來一次保存更多產品。
我在論壇上發現了一個爲用戶輸入數據創建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 } } ?> 

new image for exemplification

+0

爲多個輸入字段提供代碼可能是您混合了字段ID –

+1

只是警告您您很容易受到SQL注入攻擊嘗試查看如果輸入自動完成字段處的引號(例如:')他的方式,一個陌生人可以讀你的整個數據庫。 – thepieterdc

+0

我添加了外部.js文件。工作正常。我現在不在乎sql注入。這個應用程序只用於內部use.after我讓它工作正常,我會做安全 –

回答

0

你加入JS中的頁面中的#search-box元素。每次創建時,必須將鍵入事件附加到新的輸入字段。

注: 1,重視keyup事件中的代碼放在網頁的啓動(即$(文件)。就緒(...)只運行一次;. 2.將keyup事件的新的輸入元素 3.通過ID將keyup事件附加到元素,總是建議我們應該有一個唯一的元素ID#search-box總是將「keyup」事件附加到匹配的第一個元素(即搜索框)

+0

感謝您的信息!我做了一些改變,但仍然無法正常工作。每個字段都會生成結果,但該列表僅顯示爲添加的最後一個字段。 –

+0

您是否可以在每次創建時檢查ID「cod_mobilier」+ room是否已正確設置爲動態輸入字段? –

+0

你可以檢查「成功」事件處理程序中的「房間」變量的值嗎?我想這實際上是導致你的邏輯在最後添加的輸入字段旁邊顯示建議框。 –