Trying to get id and value with typeahead.js and php and Ajax

Question

I'm trying to get the id and name of countries from database and make an autocomplete which would get the id of the country for further search in db.But when I want to get the name only it works perfectly but when I want to get id as well nothing works anymore. I really appreciate your help.

fetch.php

<?php 
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
echo 'Connect Error (' . $conn->connect_errno . ') '
    . $conn->connect_error;
}
// $conn;
$request = mysqli_real_escape_string($conn,$_POST["query"]);
$sql = "SELECT * FROM countries where name like '".$request."%' ";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
 // output data of each row
 while($row = $result->fetch_assoc()) {
      $data[] = array('name' => $row["name"] , 'id'=> $row["id"]);
 }
echo json_encode($data);
} 
?>

index.php

<script>
$(document).ready(function(){
 
 $('#country').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data){
     result($.map(data, function(item){
      return {
          id:item.id,
          name:item.name
      }
     }));
    }
   })
  }
  select: function (event,ui){
     $(this).val(ui.item.name);
     $('#idc').val(ui.item.id);
     return false;
     }
 });
 
});
</script>

 <form action="" method="post">
   <input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
   <input type="hidden" name="idc" value="" id="idc">
   <input type="submit" value="submit">
     </form>

The script above doesn't work because I'm trying to get the id as well. but the script below works because it just shows name of the country.

<script>
$(document).ready(function(){
 
 $('#country').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data){
     result($.map(data, function(item){
      return {
          id:item.id,
          name:item.name
      }
     }));
    }
   })
  }
 });
 
});
</script>

Notice that for the script above I just deleted the select:function(event,ui) and nothing else has changed. so I guess that's the problem. because even though I haven't changed the return or anything else it still shows the name. I would really appreciate your help.

Answer 1

I solved it the same day but i was too busy to update the result here. my mistake was that i was combining jquery autocomplete and typeahead together. for what i wanted to do jquery autocomplete was more than enough and here is the code for it

$('#placeautocomplete').autocomplete({
          source: "fetch.php",
          select: function (event,ui){
               $(this).val(ui.item.value)
               $('#placeidautoc').val(ui.item.id);
          },
          minLength: 2,
          autoFocus :true,

     });