jQuery UI AutoComplete Feature to MySQL with Local Storage?

Interested in using the jQuery UI autocomplete feature to connect with a large MySQL database of events. Will this slow down each page significantly?(Search bar will be on all pages)

Should I store the results from the Query to Local Storage put the script at the bottom of the page? Or SESSION or Cookie?

Here is the code without any cache features.

<?php

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

?>

<s开发者_Python百科cript>
    $(function() {
    var availableTags = [
<?php

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

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

**EDIT: To clarify my question is will using the autocomplete slow down pages significantly? If so what methods can be used to improve this?

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

Your better off using AJAX to retrieve events containing the string the user types, that will filter down your result set and means your page won't take ages to load either.

In my experience, both local and remote autocomplete has been reasonably fast. I use one or the other depending on how much data is going to be loaded into the source, and what the probability is that the data will be accessed. If there is a large dataset your autocomplete will be searching against, it may be best to use the remote option (http://jqueryui.com/demos/autocomplete/#remote). That may add a slight delay depending on how long the results are returned by mySQL/web server and how much data is sent over the connection.

Another option is to keep the source data in an external javascript file so that the browser only needs to download it once (it should automatically cache it). Again, this depends on how much data there is. If there's quite a lot of data, it may make more sense to go with the remote/AJAX route.

Placing the results in a session or cookie shouldn't be needed, although caching the results is a good idea to save on database hits. The autocomplete component has a caching option (http://jqueryui.com/demos/autocomplete/#remote-with-cache), but there are other ways to cache ajax requests and javascript so that it's cached for all visitors.