UberComplete jQuery Plugin

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

Options
getOptions: function(query,callback)
options: []
valProp: "id"
txtProp: "txt"
txtTemplate: '{fName} {lName}'
minLen: 2
addPos: "top" or "bottom"
sortType: alpha, asc, desc, custom
sort: function(a, b) { }
sortProp: txt
creatable: true
bufferMs: 250
allowAddDuplicate: false
createLbl:
width:
minWidth:
height:
minHeight:
Methods
clear()
val(id, text)
Events
select: function(id, opt)
add: function(valStr)
confirmAddDuplicate: function(callback)

Basic Example:

Show Code

Containment Example:

Show Code

Download for More Fun:

file_downloadUberComplete.js


Explore Chakra7 Today