Как я могу использовать данные, которые я получаю из своей базы данных, используя MySQLi, в Bootstrap typeahead?

Question

Я использую инструкции jQuery ajax + MySQLi для получения данных из моей базы данных. Проблема в том, что я не знаю, как точно форматировать данные для использования в плагине типа Bootstrap.

Это соответствующий код:

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

Что я получаю в ответ AJAX это все имена, как кучу текста:

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

Я думаю, У меня должен быть массив имен, и я не знаю, как получить результат stmt как массив. Например, я попробовал и работает (я использовать массив allCities в качестве источника данных):

<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> 

Теперь, если бы я только мог получить результат в том же формате, как и в примере, моя проблема должна быть решена, я думаю, , Кстати, я не уверен насчет json_encode(), который я использовал в коде. Это то, что я попробовал. Я ценю любую помощь. Благодарю.

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 + "'"); 
     } 
    }); 

еще одно обновление:

На вкладке Сеть ответ дает результат я хочу, но в этом формате: Resistance: Fall of ManResident Evil 4John Woo Presents StrangleholdAge of Empires II: The Age of KingsResident Evil 2. Таким образом, без форматирования. Console.log(resp) ничего мне не дает. Хотя, когда я ищу «живое зло 6», это означает, что когда я набираю EXACT NAME, также работает console.log.

Answer 1

В основном вы должны создать ключ => значение магазина массив, а затем, в конце концов вы должны вывести его с json_encode. Что вы делаете неправильно в своем коде, вы пытаетесь эхо и json_encode при каждом результате, который должен быть сделан только в конце.

Answer 2

введите код, который инициализирует запрос ajax.

Например, это сокращение для функции JQuery Ajax

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

если тип данных, указанный в формате JSON, то функция обратного вызова получит массив как allCities в вашем примере, то вы можете передать его в плагин. Например, псевдокода:

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