javascript - AJAX 自动提示系统显示重复？

问题描述

我有一个搜索栏，可以搜索一些标题。我为它做了一个简单的自动完成系统。我制作了一个带有一些自动完成功能的简单 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 标签

与此问题相关的所有代码都在上面发布。请告诉我这样做的原因。

标签： javascriptphphtmlcssajax

javascript - AJAX 自动提示系统显示重复？

问题描述

解决方案

推荐阅读