Jquery AutoComplete Plugin : SelectInPlace

There is a lot of auto-complete/suggest javascript libraries. In this library I used power and simplicity of jQuery and different javascript ideas and techniques.

All that one need is last jQuery code, this plugin and few CSS rules。

Idea from Proto!TextboxList

Features

Simple configuration and using
AJAX and local data models
Scrollable suggests list
Multiple suggests support
Customed suggests list
Keyboard event support

Using

Plug-in extends jQuery namespace with selectInPlace(options) function.

Applying is usual for jQuery

$('#inputId'). selectInPlace({ 
    "url"	 : "json.html?a=x", 
    dynamic	 : true, 
});

Each text element may be affected only once, non text elements not affected at all.

Options

data — Local data
url – An URL pointing at a remote resource
param – the param name for the input words , default:”keyword”
dynamic – IF TRUE , remote data will be requested every time when the text of the input box changes; IF false , remote data will be requested only once . default : FALSE
cache : Whether to enable the http request cache ,default :FALSE
minchar – The minimum number of characters a user has to type before the autocompleter activates , default 1
opacity – opacity of the suggestions ,default: 1.0
zindex – zindex of the suggestions ,default : 20000
height – height of the suggestions, default : 200
delay – The delay in milliseconds the autocompleter waits after a keystroke to activate itself , default : 500
max – Limit the number of items in the select box , default 10 .
loadingImg – the image when waiting for ajax calls , default : ’ajax-loader.gif’
loadingText – the text when waiting for ajax calls , default : ’Loading…’
autoChange – IF TRUE, automatically change the text of the text box on hover or selected. IF FALSE: change the text of the textbox when enter or mouse click on the suggestion, default : TRUE
type – The type of request to make (”POST” or “GET”), default is “GET”
multiple – Whether to allow more than one autocompleted-value to enter , default : true
separator – separator for the selected items ,default : ’,’
labelMethod – function for label of selected items , default: formatText
htmlMethod – function for suggestion items ,default : formatHtml
valueMethod – function for getting the value of item , default : getValue
fullMessage – the message text when sum of selected items reaches max , default : ”you cannot select more..”

Demo

Download

http://www.codigg.com/demo/selectInPlace/selectInPlace.rar