CODEWITHSUNDEEP
javascriptjqueryhtmlajaxtypeahead.js
Michel Xavier
Michel Xavier

Reputation: 145

Twitter Typeahead: How to show "Result not found" message into a DIV?

I'm using Twitter TypeAhead plugin 0.11 and i would like to display a message "No results found" into a DIV, however the code that i'm inserting according to the documentation is not working. I found some similar questions about, and i didn't find the correctly way to solve this:

  1. twitter bootstrap typeahead ajax example
  2. jQuery Ajax error handling, show custom exception messages
  3. Twitter Typeahead with template always return only 1 row of data
  4. typeahead empty template not working

The parameter that i'm trying to use is "templates {empty:". Below are the typeahead and ajax code that i'm using in my project:

HTML code:

<label>Search Country</label>
   <input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
<div id="message"></div>

TypeAhead and Ajax code:

<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 item;
     }));
    }

   })
  },

  templates: {
        empty: function(data){

          $('#message').text('Country not found');
        }},

 });

});
</script>

And finally, the php code fetch.php that return results to Ajax:

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$request = ($connect, $_POST["query"]);
$query = "
 SELECT * FROM countries WHERE name LIKE '%".$request."%'
";

$result = mysqli_query($connect, $query);

$data = array();

if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_assoc($result))
 {
  $data[] = $row["name"];
 }
 echo json_encode($data);
}

?>

All the code above works fine, but when i inserted the code below after typeahead parameter "source", nothing happen when i type something wrong inside input "#country"

templates: {
        empty: function(data){

          $('#message').text('Country not found');
        }},

In this case, is it possible to display "No results Founds" inside a div?

Upvotes: 0

Views: 745

Answers (1)

Alex C
Alex C

Reputation: 61

I think you need to use notFound instead of empty.

Also, I believe the options argument is required but can be null. So you should be calling it like this .typeahead(null, { source: ..., templates: { notFound: ... } })

Upvotes: 0

Related Questions