Question

有兴趣使用jQuery UI自动完成功能连接大型MySQL事件数据库。这会显着减慢每一页的速度吗？（搜索栏将显示在所有页面上）

我应该将查询结果存储到本地存储中，将脚本放在页面底部吗？或SESSION或Cookie？

这是没有任何缓存功能的代码。

<?php

require_once("../../connect.php");
$day_events = "SELECT * FROM tbl_events";
$events_result = mysql_query($day_events);

?>

<script>
    $(function() {
    var availableTags = [
<?php

  while($event_row=mysql_fetch_array($events_result)) {
  echo "\"".$event_row['event']."\",\n";
  }

?>
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});
</script>

**编辑：澄清我的问题是否会显着使用自动填充慢速页面？如果是这样，可以用什么方法来改善这个？

Answer 1

最好使用AJAX检索包含用户输入字符串的事件，这将过滤掉您的结果集，这意味着您的页面也不会花费很长时间来加载。

Answer 2

根据我的经验，本地和远程自动完成功能都相当快。我根据将要加载到源中的数据量以及数据被访问的概率来使用其中一个。如果您的自动完成程序将搜索大型数据集，则最好使用远程选项（http://jqueryui.com/demos/autocomplete/#remote）。这可能会稍微延迟，具体取决于mySQL / Web服务器返回结果的时间以及通过连接发送的数据量。

另一种选择是将源数据保存在外部javascript文件中，以便浏览器只需要下载一次（它应该自动缓存它）。同样，这取决于有多少数据。如果有相当多的数据，那么使用远程/ AJAX路由可能更有意义。

不应该将结果放在会话或cookie中，尽管缓存结果是保存数据库命中的好主意。自动完成组件有一个缓存选项（http://jqueryui.com/demos/autocomplete/#remote-with-cache），但还有其他方法可以缓存ajax请求和javascript，以便为所有访问者缓存它。

Answer 3

<script> 
$().ready(function() {
$('#tag').autocomplete('tag.php?find=tag', {
          width: 260,
          matchContains: true,
          selectFirst: false
        });
});
</script>

<?php
//in tag.php
$find = $_GET["find"];
if($find=='tag'){
    $q = strtolower($_GET["q"]);
    if (!$q) return;
    $sql = "select DISTINCT tag from tag where name_tag LIKE '%$q%'";
    $rsd = mysql_query($sql);
    while($rs = mysql_fetch_array($rsd)) {
        $cname = $rs['name_tag'];
        echo "$cname\n";
    }
}
?>

<input id='tag' type='text'>

具有本地存储的MySQL的jQuery UI自动完成功能？

3 个答案: