Storing data locally for an autocomplete/typeahead field

By : Inkling

I'm building a web app (in React on the client-side and backed by a Rails server API) with an autocomplete/typeahead input field. I want to store the data for this field locally (on the client) because:

  1. I want the response when the user is typing to be instant. This is important because it is essentially a data-entry app with this process being repeated many times. This also means that the data is going to be reused again and again.
  2. The data is static, it doesn't change (except maybe once every 1-2 years when a new dataset comes out).

The data consists of ~2600 objects, each with a little bit of associated data. In total the generated JSON array currently works out to be about 420 KB in size.

My question is: what is the best strategy for storing this data in a reasonably persistent manner on the client side?

  • Should it live in its own static js file, assigned to a variable, that gets loaded with the page and (hopefully) cached on subsequent visits?

  • Should it be sent over (at least initially) as JSON via Ajax - would that give me the same caching benefits (except with a bit more flexibility)?

  • What about local storage - is it recommended? Does it work in IE8? How would I make use of it in this case if so? Can I invalidate it if I have to?

Like I said, the client-side is being built in React, but I'm also using jQuery if that's relevant.

Any help or suggestions appreciated, thanks.

By : Inkling


Though storing ~2600 objects on client side is not my preference, (i would prefer filtering the result on the server side by ajax call, and you are running rails already. The response is instant to user if handled properly).

  1. Thus if you really want client side saving data, create a Store(if you are using flux) or just a global variable to hold the constants. Include the constant for filtering / auto-complete.
  2. Getting initial data via Ajax: If you cache the response on rails server of the index endpoint, you do gain a bit more flexibility (adding / editing datas etc). However problem is we lose bandwidth since the component will have to fire the ajax every single time rendered. If one want to extend usage to mobile application, this becomes more a bottleneck.
  3. Doing it by local storage in this case has the same effect as global variable.
By : IcyBright

There is so many option and that's why though is also differ to usage.

My optionion is to go with first means static variable in js.

By default jquery typeahead/ autocomplete is work on local data. What I did is something differ, initially we load data of 1000, but later requirement was to get the data from server on each character typing.

Now for performance points of your question. When your data is static you may use any client side storage like js, localstorage or jstorage etc.

1. In your data is not much so you can load the data via js. Just check first that how much time taken to load js via `firebug in firefox browser`.

2. Your second option is same impact, only differ is you have to code to get data on client side. Means overall you have to store in js variable as in first option.

3. Yes, local storage is work on IE8.

For pros and cons, check the link.

By : Ajay2707

This video can help you solving your question :)
By: admin