Javascript 在pageload上仅加载一次源的引导预输入自动完成

我想通过jquery从服务器加载整个源数据，但在pageload上只加载一次。我想把它存储在一个变量中。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);

---

我做错了什么？

你的html代码在哪里

您是否正在使用此：

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

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

$(document).ready(function(){

//do my js
});

还可以尝试：

console.log（数据源），然后将该变量传递给引导插件

一定要试试这个：

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

});

你的html代码在哪里

您是否正在使用此：

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

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

$(document).ready(function(){

//do my js
});

还可以尝试：

console.log（数据源），然后将该变量传递给引导插件

一定要试试这个：

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

});

分配新数组将丢失对数组
数据源的引用。您需要操纵数组以避免丢失对它的引用

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



另一个选项是缓存响应。我个人比较喜欢这种方法

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

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




PHP返回的
内容类型不正确。尝试
$.ajax
而不是
$.post

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

请注意，
dataType
设置为
json

您还可以使用在PHP中设置正确的
内容类型

分配新数组将丢失对数组
数据源的引用。您需要操纵数组以避免丢失对它的引用

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



另一个选项是缓存响应。我个人比较喜欢这种方法

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

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




PHP返回的
内容类型不正确。尝试
$.ajax
而不是
$.post

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

请注意，
dataType
设置为
json

您还可以使用在PHP中设置正确的
内容类型

是的，我在Chrome工具中使用这个Yep，我可以看到响应是：[“blablabla”，“blablabla”]很有趣，当输入内部时会发生什么？控制台中有错误吗？：没有错误。它不会自动完成。它就像一个普通的文本输入字段。它只有在我写“source:[“asdfasd”，“sdfsadh”…]时才起作用。我也这么做了，但它工作不正常。我必须将JSON转换为数组吗？不，我认为您应该尝试转储数据以检查它是否返回到插件中，请尝试console.log（datasource）；在将请求传递给插件之前，当请求完成时，您是否正在运行文档中的所有js。准备好了吗？是的，我正在Chrome工具中使用此Yep，我可以看到响应：[“blablabla”，“blablablabla”]有趣的是，当输入内部输入时会发生什么？控制台中有错误吗？：Pno没有错误。它不会自动完成。它就像一个普通的输入文本输入字段。它只在我写“source:[“asdfasd”，“sdfsadh”…]时起作用。我也这样做了，但它不能正常工作。我必须将JSON转换成数组吗？不，我认为你应该尝试转储数据以检查它是否返回到插件中，试试console.log（datasource）；当请求在传递给插件之前完成时，您是否正在运行document.ready中的所有js？您是否正在使用Twitter Bootstrap v2.1？我刚刚更新了我的答案。你在使用Twitter Bootstrap v2.1吗？我刚刚更新了我的答案。请随意尝试。我使用了你的缓存版本，它似乎运行得很好，但我得到的是：@XHotSniperX，用你的服务器端脚本更新你的问题。因为，这里列出了两个选项works@XHotSniperX，您能否将
数据的内容记录在
$的成功句柄中。post
？恐怕这个问题可能与typeahead脚本无关。您的第一个方法给出了一个错误：uncaughtTypeError:Function.prototype.apply:Arguments列表的类型错误。回调函数中的警报（数据）发布如下内容：[“Marc Tarnutzer”，“Michael Schumacher”]。正是我想要的。@XHotSniperX，你的消息来源不匹配。当屏幕截图中假定只有两个结果时，您有三个结果。你在某处被覆盖了。最好粘贴完整的代码，不要有代码片段。这花费了太多时间我使用了你的缓存版本，它似乎运行得很好，但我得到的是：@XHotSniperX，用你的服务器端脚本更新你的问题。因为，这里列出了两个选项works@XHotSniperX，您能否将
数据的内容记录在
$的成功句柄中。post
？恐怕这个问题可能与typeahead脚本无关。您的第一个方法给出了一个错误：uncaughtTypeError:Function.prototype.apply:Arguments列表的类型错误。回调函数中的警报（数据）发布如下内容：[“Marc Tarnutzer”，“Michael Schumacher”]。正是我想要的。@XHotSniperX，你的消息来源不匹配。当屏幕截图中假定只有两个结果时，您有三个结果。你在某处被覆盖了。最好粘贴完整的代码，不要有代码片段。这太费时了