AJAX自动提示系统是否显示重复项？

Question

我有一个搜索栏，用于搜索一些标题。 我为此做了一个简单的自动完成系统。 我做了一个简单的带有自动完成功能的MySQL表。 就这个。

然后，我使用AJAX检索数据。 但是，此自动完成系统显示重复项。 图片后给出了代码。 （标题google有重复的条目，但表中只有一个）。

 function suggest(val){ if(val.length == 0){ document.getElementById("suggestions").innerHTML = ''; } else{ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200){ var res = this.response; if(res.length != 0){ document.getElementById("suggestions").innerHTML = res; var spans = document.getElementById("suggestions").getElementsByTagName('span'); var span_values = []; for(span of spans){ if(span_values.includes(span.innerHTML)){ console.log(span.innerHTML); span.nextSibling.remove(); span.remove(); } else{ console.log(span.innerHTML); span_values.push(span.innerHTML); } } } else{ document.getElementById("suggestions").innerHTML = ''; } } } xhttp.open('GET', '../../search/apis/suggestions/?query=' + val, true); xhttp.send(); } } 

 #omnibox-container-main-div{ margin:40px 30px 0 30px; text-align: center; } #omnibox-container-div{ display: inline-flex; flex-flow: row wrap; align-items: center; } #omnibox-input{ display: inline-block; width: 80%; padding:8px; border:none; border-left:2px solid rgb(0, 97, 189); border-right:none; border-top:2px solid rgb(0, 97, 189); border-bottom:2px solid rgb(0, 97, 189); font-family: 'regular'; font-size:15px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } #omnibox-input::placeholder{ font-family: 'light'; color:rgb(134, 134, 134); } #omnibox-submit-btn{ display: inline-block; width:70px; color:rgb(126, 126, 126); font-family: 'light'; font-size: 15px; padding:8px; border: none; background-color: white; border-top:2px solid rgb(0, 97, 189); border-bottom:2px solid rgb(0, 97, 189); border-right:2px solid rgb(0, 97, 189); border-left:none; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } #omnibox-submit-btn:hover{ background-color: rgb(1, 85, 163); color:white; cursor: pointer; } #close-notice-span{ text-decoration: none; color:rgb(78, 78, 78); font-family: 'bold'; position: absolute; right:10px;; cursor: pointer; } #suggestions{ margin-top:10px; font-family: 'medium'; z-index: 20; } .suggestions-a{ text-decoration: none; margin:5px; color:rgb(148, 148, 148); font-size: 15px; padding-left:8px; padding-right:8px; cursor: pointer; } .suggestions-a:hover{ background-color: rgba(21, 122, 255, 0.6); color:white; border-radius: 50px; } #sug-wrapper{ display:none; margin-left:calc((100vw - 470px) / 2); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-right:calc((100vw - 470px) / 2); padding-right:15px; padding-left: 15px; margin-top:-10px; border-left:2px solid rgb(0, 97, 189); border-right:2px solid rgb(0, 97, 189); border-bottom:2px solid rgb(0, 97, 189); box-shadow: 2px 2px 2px 2px rgb(167, 167, 167); height:200px; max-height: 200px; overflow: auto; } 

 <div id="omnibox-container-main-div"> <div id="omnibox-container-div"> <input id="omnibox-input" type="text" value = "" placeholder="Type here..." oninput="suggest(this.value)" autocomplete="off"/><button id="omnibox-submit-btn" onclick="search_query()">Search</button> </div> </div> <div id="sug-wrapper"> <div id="suggestions"> </div> </div> 

服务器端PHP代码。

<?php
    if(isset($_GET['query'])){
        $q = strtolower($_GET['query']);
        if($q != '' or $q != null){
            $con = mysqli_connect('localhost', 'root', '', 'search');
            $sql = "SELECT `query` FROM `suggestions` WHERE `query` LIKE '%".$q."%'";
            $res = mysqli_query($con, $sql);
            if(mysqli_num_rows($res) > 0){
                $matched = [];
                $temp = [];
                while($row = mysqli_fetch_assoc($res)){
                    $query = strtolower($row['query']);
                    array_push($temp, $query);
                }
                array_unique($temp);
                $matched = preg_grep("/^".$q.".*?/", $temp);
                array_unique($matched);
                array_splice($matched, 6, count($matched) - 6);
                foreach($matched as $match){
                    $mes = "<span class='suggestions-a' onmouseleave='selected=false;' onmouseenter='selected=true;' onclick='change_omni(\"".$match."\")'>".$match."</span><br/>";
                    echo $mes;
                }
            }
            mysqli_close($con);
        }
    }
?>

我不为什么它显示重复的值。 我不知道为什么。 我尝试了很多事情

• php代码中的array_unique（）
• 检查并删除javascript中重复的span标签

与该问题有关的所有代码均已发布在上面。 请告诉我原因。

Answer 1

您无法调用array_unique的原因是array_unique 返回了一个唯一值数组。 它不会影响输入数组。 这样的事情会起作用：

$matched = array_unique($matched);

但是，在查询中处理重复项比较容易，只需添加DISTINCT关键字：

$sql = "SELECT DISTINCT `query` FROM `suggestions` WHERE `query` LIKE '%".$q."%'";