Use .js files for caching large dropdown lists

I would like to keep the contents of large UI lists cached on the client, and updated according to criterial or regularly. Client side code can then just fill the dropdowns locally, avoiding long page download times.

These lists can be close to 4k items, and d开发者_Python百科ynamically filtering them without caching would result in several rather large round trips.

How can I go about this? I mean, what patterns and strategies would be suitable for this?

Aggressive caching of JSON would work for this, you just hash the JS file and throw it on the end of it's URL to update it when it changes. One revision might look like this:

/media/js/ac.js?1234ABCD

And when the file changes, the hash changes.

/media/js/ac.js?4321DCBA

This way, when a client loads the page, your server-side code links to the hashed URL, and the client will get a 304 Not Modified response on their next page load (assuming you have this enabled on your server). If you use this method you should set the files to never expire, as the "expiring" portion will be dealt with by the hash, i.e., when the JS file does expire, the hash will change and the client won't get a 304, but rather a 200.

ac.js might contain a list or other iterable that your autocomplete code can parse as it's completion pool and you'd access it just like any other JS variable.

Practically speaking, though, this shouldn't be necessary for most projects. Using something like memcached server-side and gzip compression will make the file both small and amazingly fast to load. If the list is HUGE (say thousands of thousands of items) you might want to consider this.

Combres is a good solution for this - it will track changes and have the browser cache the js forever until a change is made, in which case it changes the URL of the item.

http://combres.codeplex.com/

You might consider rather than storing the data locally using jQuery and AJAX to dynamically update the dropdown lists. Calls can be made whenever needed and the downloads would be pretty quick.

Just a thought.

This might be helpful:

http://think2loud.com/using-jquery-and-xml-to-populate-a-drop-down-box/

If its just textual data, you have compression enabled on the web server, and there are less than 100 items, then there may be no need to maintain lists in the client script.

Its usually best to put all your data (list items are data) in one place so you dont have to worry about synchronization.