Klajdi Dosti Klajdi Dosti - 2 months ago 7
CSS Question

Autocomplete: show completed characters in a different colour

I'm trying to make a autocomplete search using ajax.I want that words and characters arent required to come up with different color.

<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>


My livesearch.php looks like:

echo "Tirana";
echo "Tepelene";
echo "Korca";


For exhample:(photo)

enter image description here

Answer

This is a basic example for what you are trying to do :

$(document).ready(function () {
 
    /* initially hide product list items */
    $("#dino-list li").hide();
 
    /* highlight matches text */
    var highlight = function (string) {
        $("#dino-list li.match").each(function () {
            var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + "");
            var matchEnd = matchStart + string.length - 1;
            var beforeMatch = $(this).text().slice(0, matchStart);
            var matchText = $(this).text().slice(matchStart, matchEnd + 1);
            var afterMatch = $(this).text().slice(matchEnd + 1);
            $(this).html(beforeMatch + "<em>" + matchText + "</em>" + afterMatch);
        });
    };
 
 
    /* filter products */
    $("#search-dinosaurs").on("keyup click input", function () {
        if (this.value.length > 0) {
            $("#dino-list li").removeClass("match").hide().filter(function () {
                return $(this).text().toLowerCase().indexOf($("#search-dinosaurs").val().toLowerCase()) != -1;
            }).addClass("match").show();
            highlight(this.value);
            $("#dino-list").show();
        }
        else {
            $("#dino-list, #dino-list li").removeClass("match").hide();
        }
    });
 
 
});
input[type=text]{
  width:200px;
  padding:8px 10px;
}

li{ list-style-type: none; }

li em {
  font-weight:bold;
  font-style:normal;
}

ul {
   padding-left: 10px;
   background: yellow;
   top: -15px;
   position: relative;
   width: 214px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-dinosaurs" placeholder="Search for Dinosaurs (start typing)" />
 
<ul id="dino-list">
  <li>Diplodocus</li>
  <li>Stegosaurus</li>
  <li>Triceratops</li>
  <li>Pteradactyl</li>
  <li>Tyrannosaurus Rex</li>
  <li>Protoceratops</li>
  <li>Iguanadon</li>
  <li>Velociraptor</li>
</ul>