title: Populate Dropdown based on location tags
body: <p>I have a database with a column known as <code>location_tags</code>, what I am trying to attempt to do is to allow the user to type in their location, the drop-down should only populate with users with matching location tags and not show the ones that don't have the location tags in them. Here is my table.
  <a href="https://i.stack.imgur.com/56K32.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/56K32.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;?php
  
  $conn = new mysqli('localhost', 'root', '', 'tutors') 
  or die ('Cannot connect to db');
  
      $result = $conn-&gt;query("select id,name,Location_tags from tutor_location");
  ?&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;input type="text" name="location_input" id="location_input"&gt;
  &lt;select name="locations" id="locations"&gt;
      &lt;script&gt; 
          $("#location_input").keydown(function(){
              const location = $("#location_input").val();
              $("#locations").hmlt(''); //reset dropdown
              // do ajax call to get locations
              $.ajax({
                  url: 'search.php',  //replace this with your route of the search function
                  data: {location}, //pass location as body data
                  dataType: 'json' //expect a json response back
                  success: function(data) {
                      data.forEach(function(el) { //loop over the json response
                          let option = `&lt;option id=${el.id} value=${el.name}&gt;${el.name}&lt;/option&gt;`
                          $("#locations").append(option); //append locations to select dropdown
                      });
                  },
                  error: function(err) {  //error functions
                      console.log(err);
                      alert("Error")
                  }
              });
          });
      &lt;/script&gt;
   &lt;select name='id'&gt;
  &lt;?php
      while ($row = $result-&gt;fetch_assoc()) {
  
                    unset($id, $name);
                    $id = $row['id'];
                    $name = $row['name']; 
                    echo '&lt;option value="'.$id.'"&gt;'.$name.'&lt;/option&gt;';
  
  }
  ?&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my search.php code: </p>
  
  <pre><code>   &lt;?php
  function SearchLocations() {
      $conn = new mysqli('localhost', 'root', '', 'tutors') or die ('Cannot connect to db');
      $result = $conn-&gt;query("select * from tutor_location where Location_tags LIKE ='%". $_GET['location']."%'");
  
      $locations = [];
  
      while ($row = $result-&gt;fetch_assoc()) {
          $locations[] = $row;    
  
      }
  
      return json_encode($locations);
  
  }
  
  ?&gt;
  </code></pre>
  
  <p>So for example, if a person types in <code>Mayfair</code> then only the first person in the database should be shown in the dropdown, the problem i am facing is that all the items is getting displayed and not based on location and it is not showing in the dropdown</p>
  
  <p><a href="https://i.stack.imgur.com/32tVG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/32tVG.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/wWmbc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWmbc.png" alt="enter image description here"></a></p>