How to create autocomplete widgets in Nedil JS

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.

Name

Type

Must/Optional

Description

source

Array / String / Nedil.Ajax Object

Must

Loads 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.

name

String

Optional

Name of the Element

enabled

Boolean

Optional

if false, makes the autocomplete disabled

strict

Boolean

Optional

if 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

watermark

String

Optional

Watermark text in the autocomplete

param

JSON

Optional

Extra parameter to be sent to Server for AJAX based implementation. AJAX reply from the server should be of the format
{ "NedilResponse" : [ "Senthil", "Senthilnathan"] }

dim

JSON

Optional

Sets dimension of the autocomplete

Name	Description
wid	Width of the autocomplete
ht	Height of the autocomplete

pos

JSON

Optional

Sets position of the autocomplete

Name	Description
x	Horizontal Position
y	Vertical Position

Methods

Name	Description
enable()	Enables the autocomplete
disable()	Disables the autocomplete

DropDown Widget Examples Example 1

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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