Bootstrap 预输入自动完成，源在页面加载时仅加载一次

Question

我想通过 jquery 从服务器加载整个源数据，但在页面加载时只加载一次。我想将它存储在一个变量中。 jquery 部分可以工作，但输入不会自动完成。它什么也不做。它只有在源代码写成 source: ["blablabla","dadadada"] 时才有效。

这是我的 Javascript 代码：

var datasource;          // this is the variable where my source will be stored

$.post("typeahead.php",
  {
    query: 'query'       // 'query' has no meaning ;)
  }, 
  function(data) {       // data looks like ["asd","fds"] thanks to json_encode on the server side
    datasource = data;
});

$('#searchInput').typeahead( {
  source: datasource
});

服务器端php代码：

    /* connect to the db */
    $con = mysql_connect("localhost","fahrschulesql1","******");
    if (!$con)
    {
        die('Could not connect: ' . mysql_error());
    }
    // Select Database
    $db_selected = mysql_select_db("fahrschulesql1", $con);
    if (!$db_selected) {
        die ("Select DB error: " . mysql_error());
    }
    $query = "SELECT Vorname, Nachname FROM Benutzer b, Fahrlehrer f WHERE b.BenutzerID = f.BenutzerID";
    $result = mysql_query($query) or die ("MySQL-Error: " . mysql_error());
    while($row = mysql_fetch_array($result)){
        $array[] = $row["Vorname"] . " " . $row["Nachname"]; 
    }
    echo json_encode($array);
    mysql_close($con);

我做错了什么？

Answer 1

通过分配一个新数组，您正在丢失对数组 datasource 的引用。您需要操作数组以避免丢失对它的引用。

var datasource = [];

$.post("typeahead.php", {
    query: 'query'
}, function(data) {
    /* Add the responses to the datasource, don't mess up the reference */
    [].push.apply(datasource, data);
});

$('#searchInput').typeahead({
    source: datasource
});

See it here.

---

另一个选项是缓存响应。我个人更喜欢这种方法而不是前一种方法。

您可以在发送第一个请求后使用process 回调并缓存数据。之后，使用缓存的数据。

var cachedsource = (function(){
    var datasource = null;
    return function(query, process){
        if(datasource !== null) {
            /* use cached data */
            return datasource;
        } else {
            $.post("typeahead.php", {
                query: 'query'
            }, function(data) {
                /* cache data */
                datasource = data;
                process(datasource);
            });
        }
    };
})();

$('#searchInput').typeahead({
    source: cachedsource
});

See it here.

---

PHP 返回不正确的Content-Type。试试$.ajax 而不是$.post。

$.ajax({
  url: "typeahead.php", 
  data: {
    query: 'query'
  },
  success: function(data) {
    /* cache data */
    datasource = data;
    process(datasource);
  },
  dataType: "json"
});

注意dataType 设置为json。

您还可以在 PHP 中使用 header() 设置正确的 Content-Type。

header('Content-Type: application/json');
echo json_encode($array);

Answer 2

你的 html 代码在哪里？

你在用这个吗：

<input id="searchInput" type="text" data-provide="typeahead">

?

然后确保您的回调在 firebug 中正常并返回数据，因为您没有在此处指定任何 url，例如：

$.post("typeahead.php",

然后确保你在 document.ready 中运行你的 js

$(document).ready(function(){

//do my js
});

也可以试试：

console.log(datasource); 在将该 var 传递给引导插件之前

一定要试试这个：

$(function(){

$.post("typeahead.php",
  {
    query: 'query'       // 'query' has no meaning ;)
  }, 
  function(data) {       // data looks like ["asd","fds"] thanks to json_encode on the server side
    $('#searchInput').typeahead( {
  source: data
});
});

});