Q:

AJAX auto-suggestion system shows duplicates?

I have a search bar that searches for some titles. I made a simple auto-completion system for it. I made a simple MySQL table with some auto-completions. Here is it.

Then I retrieve the data using AJAX. But this auto-completion system shows duplicates. Code for it is given after the image. (There are duplicate entries for the title google, but there is only one in the table).

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>

server-side PHP code.
<?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);
        }
    }
?>

I do not why it is showing duplicate value. I was unable to figure out why. I tried many thing,

array_unique() in the php code
checking and removing duplicate span tags in the javascript

All the code related to this problem is posted above. Please tell me the reason for this. 

A:

The reason your call to array_unique doesn't work is that array_unique returns an array of unique values; it doesn't affect the input array. Something like this would work:
$matched = array_unique($matched);

However it is easier to deal with duplicates in your query, just add the DISTINCT keyword:
$sql = "SELECT DISTINCT `query` FROM `suggestions` WHERE `query` LIKE '%".$q."%'";

