jQuery Autocompletify : Custom Autocomplete

[column size=”four-fifth”]

Autocompletify  Overview and Features:-

In modern web interface  Autocomplete,  Autosuggest is one of the most important features. Are you looking for custom autocomplete ? The most efficient way to create an autocomplete is by using jQuery and jQuery-UI.

Here comes   Autocompletify an extended version of jQuery-UI autocomplete, which provides customization of data.  Autocompletify jQuery plugin allows you to add your own HTML template. User can add their own custom HTML structure

The idea of making Autocompletify comes in my mind, when I was working with some projects and there I played a lot with jQuery UI Autocomplete. Good things about  jQuey UI plugin is it allows you to customize your result but for that you have to go deep into the plugin and write your own piece of code as I did same when I was writing 😉 .

So I thought why not wrap up all this into one and make jQuery UI autocomplete extended version .i.e Autocompletify.

Autocompletify  built with focus on  custom user interface option  ( custom HTML Template ), instead of default UI. Developer can add their own HTML structured, whatever they user wants to display in autosuggestion can be added, by which more than one field (data) will be displaying. Many pre-defined HTML templates are available i.e facebook like search autocomplete and many more.

In this tutorial, I will demonstrate the usage of Autocompletify widget. When the user types some characters in the relevant input, a list with titles matching given term automatically appears.

 jQuery Autocompletify widget has following properties:

  • Lightweight: 2.2 kb of JavaScript – less than 1.4  kb  gzipped
  • You can set your own custom  UI Structure (.ie. custom HTML fragments)
  • Set custom CSS, as we have separate .CSS file (no inlined styling done)
  • Facebook style search autocompletes template available
  • Fully flexible data source  local JSON, remote AJAX data
  • Display an animated loading image, ajax indicator ( while server-side database result occurs, disappear after ajax call completed)
  • Many custom  HTML templates available.
  • Highlight character matching char from the result.
  • A full working demo is available (demo link ).
  • C# and MS SQL  are used as server side technologies (also done in PHP, Java)
  • Highlight results (given term is highlighted inside scroll results)

 

   Download    Live Demo

Copyright :

Autocompletify for jQuery is freely distributable under the terms of an MIT-style license. No dependencies except the jQuery library. Currently supported browsers: IE 7+, FF 2+, Safari 3+, Opera 9+ ,Chrome[/column]

[column size=”one-fifth” last=”true”]Testas as as as as[/column]