JQuery 自动完成在页面刷新后才工作 and/or 随机事件

Question

为标题道歉。

我有一个页面使用两个脚本，它们都作用于相同的表单。

这是一个自动保存脚本（因为表单上有很多输入，我不希望用户丢失数据）。

<script rel="text/javascript">
    $(function () {
        $.post("autosave.php", "json");
        setInterval(function () {
            $.post("autosave.php", $("form").serialize());
        }, 2000);
    });
</script>

效果很好。 autosave.php 只不过是一个简单的数据库查询，根据从表单获取的 POST 数据更新各个字段。

我还为表单中的电子邮件字段使用了自动完成脚本。

<script rel="text/javascript">
    $(function() {
        var availableTags = <?php include('view-job-q-em-search.php'); ?>;
        $("#sendy_to").autocomplete({
            source: availableTags,
            autoFocus:true
        });
    });
</script>

这也很好用，这里的 PHP 脚本只是一个返回 json 数组的简单数据库查询。

然而，它们不能很好地协同工作，但它们确实是一种时尚。

有趣的是，如果我在表单的一个文本框中输入一个字符，然后刷新，自动完成功能开始工作，但在第一次加载页面时不会。就像在自动竞争开始之前等待自动保存执行它的第一个动作一样。

我对 Jquery 足够精通，可以让这些东西发挥作用，但还不够好，无法发现异常，所以任何帮助或想法来让这项工作发挥作用都是非常好的。

我还在使用通用外部脚本 jquery.min、jquery、ui，它们在 <head> [=15= 中的页面开头加载]

Answer 1

从外观上看（没有运行太多测试），您是运行同步方式的代码。我的意思是这个声明：

var availableTags = <?php include('view-job-q-em-search.php'); ?>;

正在阻止其余代码的执行，因为您的服务器正在解析 PHP 脚本。不要为可用标签包含脚本，而是使用 AJAX 来请求标签可用，例如：

var availableTags;
$.get( "tags/getAvailable", function( data ) {
    availableTags = data;
    $("#sendy_to").autocomplete({
        source: availableTags,
        autoFocus:true
    });
});

应该可以解决问题。 view-job-q-em-search.php的内容可以详细说一下吗？

Answer 2

好的，这是两件事的结合。首先，你完全正确，调用需要同步。

最大的问题... 因为我每两秒自动保存一次，所以我一打开表格就保存了一个空白行。自动完成的查询然后试图用空白条目填充 json 数组，但它不喜欢它。

解决方法是添加...

$dname_list = array();
while($row = mysqli_fetch_array($result))
{
    if(!empty($row['sent_to'])){
        $dname_list[] = $row['sent_to'];
    }

}
echo json_encode($dname_list);

...查询中的 !empty 子句，这样它就不会尝试将空行添加到 json 数组。

JQuery 自动完成在页面刷新后才工作 and/or 随机事件

JQuery autocomplete not working until after page refresh and/or a random event

php

ajax

jquery

autosave