Search Box with autocomplete jQuery - Update

Question

I am trying to implement Instant Search Box with autocomplete (jQuery). The data is being fetched from database. I can see it is getting through but for some reason autocomplete is not working.

HTML

<div class="ui-widget">
  <label style="color: white" for="searchBar">Skills: </label>
  <input id="searchBar">
</div>

PHP - Slim framework

$app->get('/ajaxsearchbox', function() {

    //$query = $_REQUEST['query'];
    $query = $_GET['query'];

    if (isset($query)) {

        $sql = DB::query("SELECT * FROM players WHERE playerName LIKE '%$query%'");

        foreach ($sql as $result[]) ;
    };
    echo json_encode(array("result" => $result));
});

jQuery

$(document).ready(function() {
  $( "#searchBar" ).autocomplete({
    source: function(request, response) {
      $.getJSON("/ajaxsearchbox",{ query:request.term},response);
    },
    minLength: 0   
  });   
})

Answer 1

Make your Get request return simpler data

$app->get('/ajaxsearchbox', function() {

    //$query = $_REQUEST['query'];
    $query = $_GET['query'];

    if (isset($query)) {

        $sql = DB::query("SELECT * FROM players WHERE playerName LIKE '%$query%'");

        foreach ($sql as $result[]) ;
    };
    echo json_encode($result);
});

after this Add custom rendering in your Jquery autocomplete like :

$(document).ready(function() {
    $( "#searchBar" ).autocomplete({
        source: function(request, response) {
            $.getJSON("/ajaxsearchbox",{ query:request.term},response);
        },
        minLength: 0,
        select: function( event, ui ) {
            $( "#searchBar" ).val( ui.item.playerName );
        },
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
       return $( "<li>" )
       .append( "<div>PlayerName : " + item.playerName + "</div>" )
       .appendTo( ul );
     };
   } );

}

)

check this link to know more about handling custom data http://jqueryui.com/autocomplete/#custom-data