AJAX auto-suggestion system shows duplicates?

Question

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.

Answer 1

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."%'";