UberComplete.js

Summary

UberComplete is autocomplete with all the bells and whistles. Easily implement smart autocomplete functionality that allows users to create new records on the fly if they can't find what they are looking for.

HTML

<center>
	<div class="uc-wrapper">
		<input id="UberCompleteInput1" />
	</div>
</center>

While designing the plugin, we decided that we wanted UberCompletes that are smart with regards to available screen space and are strongly tied with the input box that opens them(for example during a downward scroll). For this reason, developers need to wrap their button in a div with class .uc-wrapper

JavaScript

$('#inputEl').UberComplete({
	"options":
		[{ id:"a", txt:"Abra Cadabra" }, 
		{ id:"b", txt:"Hocus Pocus"}, 
		{ id:"c", txt:"Counterintelligence" }, 
		{ id:"d", txt:"Paramilitary" }, 
		{ id:"e", txt:"Special Teams" }],
	"height":550,
	"width":350,
	"minLen":0,
	"priority":"bltr",
	"creatable":true,
	"containment":$('#contaimentEl'),
	"UberCompleteStyles":{}
});

Dynamic Options, Async Friendly

$('#inputEl').UberComplete({
	"getOptions":function(query, callback) {
		//ajax here, for instance
		window.setTimeout(function() {
			callback([{ id:"a", txt:"Abra Cadabra" }, 
			{ id:"b", txt:"Hocus Pocus"}, 
			{ id:"c", txt:"Counterintelligence" }, 
			{ id:"d", txt:"Paramilitary" }, 
			{ id:"e", txt:"Special Teams" }]);
		}, 10);
	},
	"height":550,
	"width":350,
	"minLen":0,
	"priority":"bltr",
	"creatable":true,
	"containment":$('#contaimentEl'),
	"UberCompleteStyles":{}
});

Quick Reference