如何在Bootstrap typeahead中使用MySQLi从我的数据库中获取的数据?

时间:2012-05-27 17:55:17

标签: php javascript mysql mysqli twitter-bootstrap

我正在使用jQuery ajax + MySQLi的预处理语句从我的数据库中获取数据。问题是我不知道如何准确格式化在Bootstrap的typeahead插件中使用的数据。

这是相关代码:

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()。这只是我尝试过的东西。我感谢任何帮助。感谢。

更新,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”时,这意味着当我输入确切名称时,console.log也有效。

2 个答案:

答案 0 :(得分:0)

发布初始化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()});
  }
});

答案 1 :(得分:0)

基本上你应该创建key =&gt;值存储数组,然后最后你应该用json_encode输出它。你在代码中做错了的是你试图回应和json_encode应该在最后完成的每一个结果。