jQuery UI 自动完成功能到 MySQL 与本地存储？

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

<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'>

Answer 2

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

Answer 3

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

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

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