Recently I’ve looked for a autocomplete or suggestion plug-in for JQuery library. I found plenty of implementation of such plug-in and now I am trying to make a comparison between them. The aspects for which I compare plug-ins are:

  1. Functionality. I want to implement auto suggestion to suggest tags from existed ones, so first I want the plug-in to suggest multiple words separated by comma and the second, I want the plug-in to use 2 sources for the suggestion values – the javascript defined arrays and a list of values from ajax call.
  2. Plug-in size. The smaller plug-in, the better. I don’t like plug-ins which require a bunch of other plug-in which can increase the size of the page too much.
  3. Speed. I think the best way for such plugins is to fetch data from server for first letter and then filter it to much further user input.

Plugins

Searching JQuery plugin repository and simply googling I found following list of plugins:

  • Autocomplete on bassistance.de. The article is here and the demo is here. This is the most developed plugin. The required functionality such as ajax and predefined list of values, caching of response is always built in it, so you can download and start to use it. And of course the main drawback is its size. The size of the unpacked script source is 18,4 Kb (12 Kb minified and 7,3Kb packed) + it strongly requires dimension plugin (2.5 Kb minified) and for old IE browsers requires bgiframe plugin (1.4 Kb minified). The bgiframe is the common fix for all such plugins so it can not be counted in the whole plugin size. But even without it the plugin is rather heavy – 14,5 Kb minified and 9.5 Kb packed.
  • jquery.suggest on www.vulgarisoip.com. The demo and the article is here. This is lightweight implementation it is only 7Kb of full source + it requires dimension and bgiframe plugins too. It doesn’t have good caching functionality, so for ajax calls it fetch data from the server as soon as new letter typed in the input box. It does not support multiple, separated entries in one textbox too.

  • autocomplete on www.dyve.net. The article and demo. 14 Kb full source script. The script is very clear, it does not require additional plugins and fist I choose it as the best solution for me but unfortunately it does not support the entering of multiple values and make good results caching.
  • jQuery plugin for Autocomplete. The project home, the demo. Script is 14 Kb weight. Does not support multiple suggestions. Supports both ajax and javascript array values data source. I’ve tried to implement further filtering results of ajax call myself, but the script execution became very slow.
  • Tag suggestion. The plugin demo and project. This plugin is a little bit different from all previous ones. It is a special solution to suggest tags and it displays the suggestion as the list of spans after the text box by default. This layout makes it difficult to use in most cases because if there is a lot of suggestion elements they will not fit in the area of the panel or page. The full source is 9,84 Kb and it does not require additional plugins. It can fetch data from array definition and ajax data source. Pretty nice solution for those, who can be sure in the number of suggestion values.

Conclusions

I chose the first one "Autocomplete on bassistance.de" autocomplete plugin from the list above. Yes it is heavy but it has all necessary functional and thanks to smart caching it does not overload server after each letter is typed. The difference with other plugins is about 4 Kb in average so it can be neglected.

Submit this story to DotNetKicks

Posted in: JQuery  Tags: , ,

Currently rated 4.0 by 1 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Comments are closed