使用本地存储将jQuery UI AutoComplete功能添加到MySQL？

Question

对使用jQuery UI autocomplete功能连接大型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

根据我的经验，本地和远程自动补全都相当快。我使用其中之一，这取决于将有多少数据加载到源中，以及数据被访问的概率有多大。如果要搜索autocomplete所依据的数据集很大，最好使用远程选项(http://jqueryui.com/demos/autocomplete/#remote)。这可能会增加轻微的延迟，这取决于mySQL/web服务器返回结果的时间以及通过连接发送的数据量。

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

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