javascript - Autocomplete Arrow Key Scroll -


i making ajax driven live search . want click dropdown list fill html textbox. how can modify codes include function user can scroll through results list using up/down arrow keys. here javascript code.

<script type="text/javascript">     function fill(value) {       $('#name').val(value);       $('#display').hide();     }      $(document).ready(function() {       $("#name").keyup(function() {         var name = $('#name').val();         if (name == "") {           $("#display").html("");         } else {           $.ajax({             type: "post",             url: "ajax.php",             data: "name=" + name,             success: function(html) {               $("#display").html(html).show();             }           });         }       });     });

and here code in ajax.php page

if(isset($_post['name'])) {  $name=trim($_post['name']); $query=mysqli_query($con,"select * mobile name '%$name%' limit 0,5");  echo "<ul>";      while($query2=mysqli_fetch_array($query))      { ?>           <div class="ajaxcontainer">             <li onclick='fill("<?php echo $query2[' name ']; ?>")'>               <a href="preview.php?id=<?php  echo $query2['name']; ?>">                 <div class="ajaximage">                   <img src="<?php echo $query2['photo'];?>">                 </div>                 <div class="ajaxh1">                   <h1><?php  echo $query2['name']; ?></h1>                 </div>               </a>             </li>           </div>           <?php } } ?>

good news.. after working 3 hours.. got solution ur problem. checkout solution. let me know if have problems in solution.i

<!doctype html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <style type="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>  function showhint(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 name in input field below:</h3>  <form action="">    <div style="position:relative">     first name: <input type="text" id="txt1" onkeyup="showhint(this.value)">     <ul id="dropdown"></ul>   </div> </form> </body> </html>

this php file.

<?php require("connection.php");  $sql ="select name 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 generate suggestions"; } // q parameter url $q = $_request["q"];  $hint = "";  // lookup hints array if $q different ""  if ($q !== "") {     $q = strtolower($q);     $len=strlen($q);     foreach($a $name) {         if (stristr($q, substr($name, 0, $len))) {             if ($hint === "") {                 $hint = $name;             } else {                 $hint .= ", $name";             }         }     } } ?>

Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

Swift game error message -

i following ios game tutorial. cannot figure out wrong here. error on these 2 lines. let newangle = percent * 180 - 180 cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi); 180.0 //error "use of unresolved identifier 'percent'" the tutorial uses: cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi)/ 180.0 but changed error suggested import spritekit class gamescene: skscene { var cannon: skspritenode! var touchlocation:cgpoint = cgpointzero override func didmovetoview(view: skview) { /* setup scene here */ cannon = self.childnodewithname("cannon") as! skspritenode } override func touchesbegan(touches: set<uitouch>, withevent event: uievent?) { /* called when touch begins */ touchlocation = touches.first!.locationinnode(self) } override func touchesmoved(touches: set<uitouch>, withevent event: uievent?) { touchlocation = touches.first!.locationinn...
Read more