Skip to content Skip to sidebar Skip to footer
Home / Ajax / Html / Javascript / Jquery / Php

Autocomplete Arrow Key Scroll

Post a Comment
I am making a Ajax driven live search . But now I want to click the dropdown list to fill the html textbox. How can I modify my codes to include a function where the user can scrol

Solution 1:

good news.. after working 3 hours.. i got the solution to ur problem. Checkout the solution. let me know if you have any problems in this solution.I

<!DOCTYPE html><html><body><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><styletype="text/css">ul{
    position: absolute;
    top: 5px;
    left: 36px;
    list-style: none;
}
li{
  border: 1px solid grey;
  width: 202px;
  margin: 0px;
}
input{
  width:200px;
}
</style><script>functionshowHint(str){
  if(str=="" || !str){
    $("ul").empty();
    return;
  }
    $.ajax({
          type: "GET",
          url: "gethint.php",
          data: "q="+str,
          success: function(html) {
            var names = html.split(",");
            var listItems ="";
            var dropDown =$("#dropDown");
            dropDown.innerHTML="";
            $("ul").empty();
            names.forEach(name =>{
              var li = document.createElement("li");
              li.appendChild(document.createTextNode(name));
              dropDown.append(li);
              $("li").click(function(){
                $("#txt1").val($(this).text());

              });
            });

          }
    });
  }
</script><h3>Start typing a name in the input field below:</h3><formaction=""><divstyle="position:relative">
    First name: <inputtype="text"id="txt1"onkeyup="showHint(this.value)"><ulid="dropDown"></ul></div></form></body></html>

This is my php file.

<?phprequire("connection.php");

$sql ="SELECT name FROM users";
$a=array();
// OR $a=[];$result=$conn->query($sql);
if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $a[]=$row["name"];
        //echo $row["name"];
    }
}
else{
    echo"No data to generate suggestions";
}
// get the q parameter from URL$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($aas$name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}
?>

Post a Comment for "Autocomplete Arrow Key Scroll"