在输入时更改mysqli查询

I have been researching this for a while and can't seem to find any good solutions so I thought I would see if anyone here has done this before that has a simple solution. Is there a way to update the query as someone is typing in the input box? The result is used on index.php where a while loop is ran on the result. I have tried a couple tutorials but I couldn't find anything that would just change the query.

<input name="search" type="text" id="search" autocomplete="off">

$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['search']);
$search_string = $tutorial_db->real_escape_string($search_string);
$result = mysqli_query($con,"SELECT * FROM directory WHERE concat(fname,' ',lname) LIKE '%".$search_string."%'");

You can put your logic inside keydown event.

document.getElementById('search').onkeydown = function(){
    // your logic goes here
};

Maybe you should try this the link below this will change the query as you go on typing in the text box. AutoComplete

You will need to use Ajax to make a request to your php script with the query, then have that script output the result and then replace your html with the new result each time.

search.php:

$result = mysqli_query($con,"SELECT * FROM directory WHERE concat(fname,' ',lname) LIKE '%".$search_string."%'");

$search_array = mysqli_fetch_assoc($result);//get associative array

print_r($search_array); //print the data in some way

The javascript (jquery)

$("#search_box").keydown( function() { //call searchChanged each time key is pressed in the html input box

   searchChanged();

});

function searchChanged() {
   $.ajax({
     url: "search.php",//contains your search query
     context: document.body
   success: function(data) { //data contains search.php's output
      $('#search_output').html(data);//insert the output into some html div on your page for viewing
   }

   });

}//search_changed()