搜索框复制在自动提示

问题描述：

我创建了一个搜索框，自动通过数据库记录表明，每当我搜索或输入的东西我的搜索框被复制。如何删除我的搜索框的重复？

<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>

提供你的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"); 
      }

在你首先必须放置这行'$（“＃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>

代码不起作用，它有相同的结果仍然复制我的搜索框 – dionell

@dionell attache屏幕截图你的意思是重复。 – ScanQR

我已将图片附加在我的问题顶部 – dionell

答

SELECT DISTINCT列名，列名 FROM TABLE_NAME;

尝试此查询获取记录

不工作，$（'＃suggestion'）。html（data）;当我使用这种语法我的网站用户界面显示在建议框 – dionell

你不能发送查询如何从数据库中获取数据？ –

谢谢你帮助我，我感谢它，但它不是关于查询。我的脚本应该是这样的，它的工作原理。 $（'＃suggestion'）。html（$（data）.find（'＃sug_list'））; – dionell

搜索框复制在自动提示

相关推荐