php - Using Twitter typeahead to make search bar work -

i using twitter typeahead make search bar work coming across issues.

purpose of search bar:

the search bar used search usernames of users registered site.

approach:

in head of home.php:

<script src="typeahead.min.js"></script> 

header.php (which included in home.php):

<input type="text" class="form-control" placeholder="search user" name="typeahead">    <script>     $(document).ready(function(){     $('input.typeahead').typeahead({         name: 'typeahead',         remote:'search.php?key=%query',         limit : 10     }); });     </script> 

search.php:

<?php include("connect.php");      $key=$_get['key'];     $array = array();     $query = mysqli_query("select * users username '%{$key}%'");     while($row=mysqli_fetch_assoc($query)){       $array[] = $row['username'];     }      echo json_encode($array); ?> 

current results:

if above code, on home.php try search user alice, real user (i not clicking on search way, typing name in search bar. expect, if alice real user, name show in drop down). if search url changes.

summary: if type alice (dont press search), nothing happens. expect drop down appear alice real username.

if type alice , click search button, url changes to:

http://localhost/home.php?typeahead=alice 

how expect work:

edit:

another approach tried in header.php:

<input type="text" class="form-control" placeholder="search user" name="typeahead">  <?php   // getting usernames db         $statement = mysqli_prepare ($connect, "select * users account_type ='user'");         mysqli_stmt_execute($statement);         $usernames = array();         $result = mysqli_stmt_get_result($statement);         while($get_data = mysqli_fetch_assoc ($result)){             $usernames[]       = $get_data['username'];         }         mysqli_stmt_close($statement);          ?>  <script>     var substringmatcher = function(strs) {   return function findmatches(q, cb) {     var matches, substringregex;      // array populated substring matches     matches = [];      // regex used determine if string contains substring `q`     substrregex = new regexp(q, 'i');      $.each(strs, function(i, str) {       if (substrregex.test(str)) {         matches.push(str);       }     });      cb(matches);   }; };  var username = <?php echo json_encode($usernames); ?>;  $('#the-basics .typeahead').typeahead({   hint: true,   highlight: true,   minlength: 1 }, {   name: 'usernames',   source: substringmatcher(username) });     </script> 

the following approach has been adopted github.

with approach still not drop down list displays matching names.

the issue in declaration typeahead. typeahead can't use remote source directly. has either provided through function or through bloodhound object.

if check out documentation typeahead, see there no setting remote.

the examples page has ideas place start well.

i use bloodhound object, complicate thing bit.

create bloodhound object:

var tasource = new bloodhound({   datumtokenizer: bloodhound.tokenizers.obj.whitespace('value'),   querytokenizer: bloodhound.tokenizers.whitespace,   identify: function(obj) {     return obj.value;   },   remote: todos }); 

i separate out remote object hash:

var todos = {   url: urlroot + '/todos',   prepare: function(query, settings) {     settings.url += '?q=' + query;     return settings;   },   filter: function(data) {     return $.map(data, function(obj) {         console.log(obj)         return {         id: obj.id,         value: obj.title       };     });   } }; 

so typeahead declaration looks this:

$('#search-input').typeahead({   hint: true,   highlight: true,   minlength: 3 }, {   name: 'mymatches',   source: tasource,   display: 'value' }); 

in case i'm searching against title in json, mapped value in object passed typeahead. json looks this:

[   {     "userid": 1,     "id": 1,     "title": "delectus aut autem",     "completed": false   },   {     "userid": 1,     "id": 2,     "title": "quis ut nam facilis et officia qui",     "completed": false   },   {     "userid": 1,     "id": 3,     "title": "fugiat veniam minus",     "completed": false   },   {     "userid": 1,     "id": 4,     "title": "et porro tempora",     "completed": true   }... 

here a fiddle demo.