0

I have the following problem: I have a working implementation of JQuery UI Autocomplete that gathers results from MYSQL Database and autotomatically fills some input fields based on user's choice.

What I am currently trying to get working is the situation when you type your search and there are no search results. Right now, the last suggested search items stay visible until you click away with mouse button. I would like to be able to hide it once there are no matching results. I have read a lot on this topic but nothing seemed to work for me. This is my Javascript part:

function AutoFill(x) {
  var classname = "." + x;
    
    $(document).on('keydown', classname, function(){
 
  var id = this.id;
  var splitid = id.split('_');
  var index = splitid[1];

  // Initialize jQuery UI autocomplete
  $( '#'+id ).autocomplete({
   source: function( request, response ) {
    $.ajax({
     url: "get-details.php",
     type: 'post',
     dataType: "json",
     data: {
      search: request.term,request:1
     }, 
     
     success: function( data ) {
          response(data);
        
     } 
    });
   },
   
   select: function (event, ui) {
    $(this).val(ui.item.label); // display the selected text
    var userid = ui.item.value; // selected value
    
    // AJAX
    $.ajax({
     url: 'get-details.php',
     type: 'post',
     data: {userid:userid,request:2},
     dataType: 'json',
     success:function(response){
         
      var len = response.length;

      if(len > 0){
       var id = response[0]['id'];
       var name = response[0]['name'];
       var number = response[0]['number'];

       // Set value to textboxes
       document.getElementById('clientname').value = name;
       document.getElementById('clientnumber').value = number;
      
      } 
     }
    });

    return false;
   }
   
  });
 });
}

And this is my PHP file, that searches through the Database:

<?php
include('includes/dbconnection.php');

$request = $_POST['request']; // request

// Get username list
if($request == 1){
 $search = $_POST['search'];

 $query = "SELECT * FROM tblclients WHERE FullName like'%".$search."%' OR MobileNumber like'%".$search."%'";
 $result = mysqli_query($con,$query);
 
 while($row = mysqli_fetch_array($result)){
     
  $response[] = array("value"=>$row['ID'],"label"=>$row['FullName'].' | '.$row['MobileNumber']);
 }

 // encoding array to json format
 echo json_encode($response);
 exit;
}

// Get details
if($request == 2){
 $userid = $_POST['userid'];
 $sql = "SELECT * FROM tblclients WHERE ID=".$userid;

 $result = mysqli_query($con,$sql); 

 $users_arr = array();

 while( $row = mysqli_fetch_array($result) ){
  $userid = $row['ID'];
  $fullname = $row['FullName'];
  $number = $row['MobileNumber'];

  $users_arr[] = array("id" => $userid, "name" => $fullname,"number" => $number);
 }

 // encoding array to json format
 echo json_encode($users_arr);
 exit;
}

I don't know what I'm doing wrong...

Forey
  • 9
  • 1
  • Add a `else` command to your `if(len > 0)` statement and then remove the autocomplete values? – Mark Aug 20 '20 at 12:03
  • This only makes the autofilling part not work if there are no results returned. What I am trying to achieve is get rid of the dropping list of results found when there are none matching... – Forey Aug 20 '20 at 13:36
  • 1
    **Warning:** You are wide open to [SQL Injections](https://stackoverflow.com/a/60496/1839439) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) – Dharman Aug 20 '20 at 13:44
  • Yes, in the `else` block you'd need to do something like: `$(control).autocomplete("destroy");`. That will completeley remove the dropping list from the control. – Mark Aug 20 '20 at 13:46
  • @Mark Doesn't work. I think I have to do something just after the source: part if not in it – Forey Aug 20 '20 at 14:16
  • I would suggest adjusting your `minLength` option maybe. Also is `response()` gets an empty array, autocomplete will not show the menu. So if it's appearing with no results, this suggests you have some elements in your array, they may just be empty. View your Network Payload in console. – Twisty Aug 20 '20 at 20:54

0 Answers0