搜索框複製在自動提示

我創建了一個搜索框，自動通過數據庫記錄表明，每當我搜索或輸入的東西我的搜索框被複制。如何刪除我的搜索框的重複？

<script> 
    $(document).ready(function(){ 
     $("#search_list").keyup(function(){ 
      $.ajax({ 
      type: "POST", 
      url: "index.php", 
      data:"keyword="+$(this).val(), 
      success: function(data){ 

       $("#suggestion").show(); 
       $("#suggestion").html(data); 
       $("#search_list").css("background","#FFF"); 
      } 
      }); 
     }); 
    }); 
    //To select name 
    function selectName(val) { 
    $("#search_list").val(val); 
    $("#suggestion").hide(); 
    } 
    </script>

-------------- -------------- PHP

<?php 
    foreach($result as $name) { 
    ?> 
    <div class="list"> 
    <a href="#" class="style_suggestions" onClick="selectName('<?php echo $name["n_Name"]; ?>');"><?php echo $name["n_Name"]; ?></a> 
    </div> 
    <?php } ?> 

    <?php } } ?>

------ ------- HTML ------------------

<html> 
    <head> 
    <title>Welcome to Nava</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible content=" ie="edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <script type="text/javascript"></script> 
    <script src="jquery.min.js"></script> 

    </head> 
    <body> 

    <div class="frmSearch"> 
    <input type="text" class="form-control" id="search_list" name="search_nv_box" placeholder="Name"/> 
     <div id="suggestion"></div> 
    </div>

來源

2016-11-24 dionell

提供你的HTML – ScanQR

你可以嘗試以下的答案。先清空（）你現有的數據集。 – ScanQR

你必須在每次添加新數據時清除<div id="suggestion"></div>

內容將其添加到您的成功中：$("#suggestion").html('');

success: function(data){ 
       $("#suggestion").html(''); // clear your data here 
       $("#suggestion").show(); 
       $("#suggestion").html(data); 
       $("#search_list").css("background","#FFF"); 
      }

來源

2016-11-24 04:33:48 EaBangalore

在你首先必須放置這行'$（「＃suggestion」）。html（''）;'on'success'函數 – EaBangalore

我想你是從'php'返回html數據的原因可能是你的'sql查詢'嘗試在'sql'中使用'distinct'CLAUSE – EaBangalore

爲什麼需要清除

？我試圖清除它並導致數據沒有顯示，只要我搜索 – dionell

試試這個，

首先，你需要在那之後清除或清空您現有的建議，並加載新的數據。

$("#suggestion").empty(); 
$("#suggestion").html(data);

所以它應該是，

$(document).ready(function(){ 
     $("#search_list").keyup(function(){ 
      $.ajax({ 
      type: "POST", 
      url: "index.php", 
      data:"keyword="+$(this).val(), 
      success: function(data){ 
       $("#suggestion").empty(); 
       $("#suggestion").html(data); 
       $("#suggestion").show(); 
       $("#search_list").css("background","#FFF"); 
      } 
      }); 
     }); 
    });

而且你應該只從PHP返回單個div元素。它似乎目前爲每個記錄創建一個div。

<?php 
    foreach($result as $name) { 
?> 
    <div class="list"> 
    <a href="#" class="style_suggestions" onClick="selectName('<?php echo $name["n_Name"]; ?>');"><?php echo $name["n_Name"]; ?></a> 
    </div> 
<?php } ?>

它應該是，

<div class="list"> 
    <?php 
    foreach($result as $name) { 
    ?> 
    <a href="#" class="style_suggestions" onClick="selectName('<?php echo $name["n_Name"]; ?>');"><?php echo $name["n_Name"]; ?></a> 

    <?php } ?> 
</div>

來源

2016-11-24 04:33:53 ScanQR

代碼不起作用，它有相同的結果仍然複製我的搜索框 – dionell

@dionell attache屏幕截圖你的意思是重複。 – ScanQR

我已將圖片附加在我的問題頂部 – dionell

SELECT DISTINCT列名，列名 FROM TABLE_NAME;

嘗試此查詢獲取記錄

來源

2016-11-25 09:58:05

不工作，$（'＃suggestion'）。html（data）;當我使用這種語法我的網站用戶界面顯示在建議框 – dionell

你不能發送查詢如何從數據庫中獲取數據？ –

謝謝你幫助我，我感謝它，但它不是關於查詢。我的腳本應該是這樣的，它的工作原理。 $（'＃suggestion'）。html（$（data）.find（'＃sug_list'））; – dionell

搜索框複製在自動提示

回答

相關問題