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

【问题标题】：jQuery UI AutoComplete Feature to MySQL with Local Storage?带有本地存储的 MySQL 的 jQuery UI 自动完成功能？
【发布时间】：2011-11-03 21:54:10
【问题描述】：

有兴趣使用 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>

**编辑：澄清我的问题是使用自动完成功能会显着减慢页面速度吗？如果可以，有什么方法可以改善？

【问题讨论】：

标签： php jquery mysql jquery-ui local-storage

【解决方案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'>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：