autoCompleteIt()

Author: Mark Turnbull
Version: 1.0.0
License: Dual Licensed - choose MIT or GPL Licenses

The autoCompleteIt JQuery Plugin transforms a simple textbox into a suggestion list based on the user input. The PlugIn's list can be populated by a Javascript Array locally or via an Ajax call.

Specify a simple Javascript Array and the textbox is transformed

$('#txtbox1').autoCompleteIt({
arr_List: ['Hello','Help','Heir','Hotel','Home',
'Homely','Hurry','Hurried']
});

Example 1 Enter H into the textbox to see the suggestions.

Set a few configuration options to add your own css classes to the unordered list and selected list item,

$('#txtbox2').autoCompleteIt({
arr_List: ['Hello','Help','Heir','Hotel','Home',
'Homely','Hurry','Hurried'],
css_Focus: 'aci-hasfocus',
css_List: 'aci-list',
css_Width: '200',
bool_Anchor: true
});

Example 2 Enter H into the textbox to see the suggestions.

The above options do the following:

  • Adds the aci-list css class to the unordered list
  • Adds the aci-hasfocus class to the list item that has the focus as a result of a hover or up and down keys
  • Sets the unordered list width to 200px, by default the width will match the textbox width
  • Setting bool_Anchor to true anchors the unordered list to the textbox, this is useful in situations where the textbox is floated.

Simply add an Ajax end point URL to return a javascript Array (JSON datatype)

$('#txtbox3').autoCompleteIt({
bool_Error: true,
css_Error: 'aci-error',
ajax_Url: 'YourAjaxEndPoint.aspx',
ajax_Type: 'POST',
ajax_TimeOut: '3000'
});

Example 3 Enter A, B or C into the textbox to see the suggestions.

The above options do the following:

  • The bool_Error = true will display the Ajax call error should one occur
  • The error span will have a css class of aci-error
  • Specifies the Ajax end point, method ie GET or POST and a 3 second timeout.

Collaboration

As a .net Developer I am relatively new to JQuery PlugIn development so I would welcome any feedback, enhancements and improvements.