AutoComplete Widget
Autocomplete is similar to dropdown but it accepts user's input and provides suggestions based on that. Autocomplete Nedil widget is capable of generating it's content from JSON or Select HTML element or AJAX Reponse. If AJAX is used, the filtering based on user's input should be done in the server side.

Basic Usage
$.domLoaded(function() {
	
	$.get("#drp").widget("autocomplete", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
sourceArray / String / Nedil.Ajax ObjectMustLoads the autocomplete from the source content. if the source is an ID of select element, drop down is loaded with the corresponding options elements. Else Array of Strings can be given as input. Nedil.Ajax object can also be used if the filtering is sever side.
nameStringOptionalName of the Element
enabledBooleanOptionalif false, makes the autocomplete disabled
strictBooleanOptionalif true, doesn't allow the user to enter the disallowed values. User will be forced to enter from the allowed value. By default it is false. This won't come into picture if AJAX type is used
watermarkStringOptionalWatermark text in the autocomplete
paramJSONOptionalExtra parameter to be sent to Server for AJAX based implementation. AJAX reply from the server should be of the format
{ "NedilResponse" : [ "Senthil", "Senthilnathan"] }
dimJSONOptionalSets dimension of the autocomplete
NameDescription
widWidth of the autocomplete
htHeight of the autocomplete
posJSONOptionalSets position of the autocomplete
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
enable()Enables the autocomplete
disable()Disables the autocomplete

DropDown Widget Examples Example 1
JS HTML
			$.domLoaded( function() {

				$.get("#parent1").widget("autocomplete", {
					source : ["Senthilnathan", "Ganesh", "Rajesh", "Shanmugavel", "Raju", "Kumar Sent", "Iqbal", "Viji", "Vishnu"],		
					dim : { wid : 200},
					name : "Users",
					watermark : "Enter User Names"
				});	
				
				$.get("#parent2").widget("autocomplete", {
					source : ["Senthilnathan", "Ganesh", "Rajesh", "Shanmugavel", "Raju", "Kumar Sent", "Iqbal", "Viji", "Vishnu"],		
					dim : { wid : 200},
					name : "Users",
					strict : true,
					watermark : "Strictly User Names"
				});	

				
			});
		<h4>Default Autocomplete - Non Strict <span>(Can accept any value)</span></h4>
		<div id="parent1"></div>
		
		<h4>Default Autocomplete - Strict <span>(Allowed values can be typed)</span></h4>
		<div id="parent2"></div>
Result
Example 2
JS HTML
			$.domLoaded( function() {

				$.get("#parent1").widget("autocomplete", {
					source : $.Ajax({url: "../../ajax/AjaxServer.php", cache : false}),
					param : { "example" : 5 },
					dim : { wid : 200},
					name : "Users",
					strict : true,
					watermark : "Ajax User Names"
				});	

				
			});
		<h4>AJAX Autocomplete <span>(Filtering should be done in Server side)</span></h4>
		<div id="parent1"></div>
Result
Example 3
JS HTML
			$.domLoaded( function() {

				var tab = $.get("#parent1").widget("autocomplete", {
					source : ["Senthilnathan", "Ganesh", "Rajesh", "Shanmugavel", "Raju", "Kumar Sent", "Iqbal", "Viji", "Vishnu"],		
					dim : { wid : 200},
					name : "Users",
					watermark : "Enter User Names",
					enabled : false
				});		

				$.get("#sel1").on("click", function() {
					tab.enable();
				});				
				
				$.get("#sel2").on("click", function() {
					tab.disable();
				});		
			});
		<h4>Enable and Disable Functions</h4>
		<input type="button" value="Enable" id="sel1" />
		<input type="button" value="Disable" id="sel2" />
		
		<div id="parent1"></div>	
Result