How can I use the data I get from my database using MySQLi, in Bootstrap typeahead?

Question

I'm using jQuery ajax + MySQLi's prepared statements to get data from my database. The problem is that I don't know how to exactly format the data to use in Bootstrap's typeahead plugin.

This is the relevant code:

PHP:

$stmt = $mysqli->prepare("SELECT GAME_NAME FROM GAMES WHERE GAME_NAME LIKE ?");
        $query = "%".$query."%";
        $stmt->bind_param('s',$query);
        $stmt->execute();
        $stmt->store_result();
        $count = $stmt->num_rows;

        if($count > 0) {

          $stmt->bind_result($result);
           while($stmt->fetch()) {

            echo json_encode($result);
          }

What I get as AJAX response is all the names as a bunch of text:

'"game 1""game 2""blaablaa""some other game"....'

I think I have to have an array of names and I don't know how to get the stmt result as an array. The example I tried and works is (I use the array allCities as data-source):

<script type="text/javascript">
        $(document).ready(function() {
            var allCities = ['Baltimore', 'Boston', 'New York', 'Tampa Bay', 'Toronto', 'Chicago', 'Cleveland', 'Detroit', 'Kansas City', 'Minnesota', 'Los Angeles', 'Oakland', 'Seattle', 'Texas'].sort();
            $('#city').typeahead({source: allCities, items:5});
        });
    </script>

Now if I only could get result in the same format as in the example, my problem should be solved, I think. Btw, I'm not sure about the json_encode() I used in the code. That's just something I gave a try. I appreciate any help. Thanks.

UPDATE, Ajax:

function handleSearch() {

    var query = $.trim($('#search-field').val());
    var itm = getSearchItem();

    $.ajax({

        type: "POST",
        url: "..//functions/handleSearch.php",
        dataType: "json",
        data: "query="+query+"&itm="+itm,
        success: function(resp) {

            console.log("Server said (response):\n '" + resp + "'");

            $('#search-field').typeahead({source: resp});


        },

        error: function(e) {
            console.log("Server said (error):\n '" + e + "'");
        }
    });

another update:

In Network tab the response gives the result I want but in this format: Resistance: Fall of ManResident Evil 4John Woo Presents StrangleholdAge of Empires II: The Age of KingsResident Evil 2 . So without any formatting. Console.log(resp) gives me nothing though. Although when I search for "resident evil 6", that means when I type in the EXACT NAME, console.log also works.

Answer 1

post the code that initializes ajax request.

For example this is shorthand for jquery ajax function

$.ajax({
    url: url,
    dataType: 'json',
    data: data,
    success: callback
});

if data type specified json then callback function will receive an array like allCities in your example then you can pass it to your plugin. For example pseudo code:

$.ajax({
  url: 'http://blabla',
  dataType: 'json',
  data: dataArray,
  success: function(response) {
    $('#city').typeahead({source: response, items:response.count()});
  }
});

Answer 2

Basically you should create key=>value store array and then in the end you should output it with json_encode. What you are doing wrong in your code is you are trying to echo and json_encode on every result which should be done just in the end.