UnComplete
A simple pure JavaScript HTML5 autofill to bridge the gap between inputs and DataList elements. Compatible with the latest versions of Chrome, FireFox, Safari and Edge browsers and IE 11+
Basic Usage
You can initialize an UnComplete object with or without a DataList the application will create a DataList with an ID of the input name appended with 'List'. For example the below the example code will create a DataList with the id="nameList" . If you create a DataList and link it to the input using the list="nameList" attribute the list will be added to the UnComplete object.
<label for="name">NAME</label>
<input id="name" name="name" type="text"></input> var name = new Uncomplete('name');This will initialize a default single select UnComplete object. The name object will have several useful properties, methods and events.
UnComplete Object Options
| Option | Description | Default |
| multiple | Adds multiple select functionality | false |
| autocomplete | Allows the input to automatically add the value without an enter press. | false |
| duplicates | Allows the input to add the same value more than once | false |
Methods
| Method | Description | Input parameters |
| addOption(attributes <Object>) | Adds option elements to an input's DataList element. This can be used to populate DataLists post page load using Ajax or other events. The parameters are UnComplete instance object and the attributes for the option element. The required are id, value and label | Required HTML attributes { value: "value1", label: "Item One", id: 1,'data-id': 1 } |
| getSelected() | This gathers the values of an input's Swiggles data ids so they can be used for other events or Ajax requests. | N.A |
| searchDataList( searchString<String>) | Searches an input's DataList with a string parameter. This matches on the option's id, value and label | N.A |
| addSwiggle( option<HTML Element>, swiggleOptions<Object> ) | Manually adds a Swiggle for populating controls which already have values. | skipEvent<Boolean>: (default false) Stops the swiggle-added event from firing, animate<Boolean>: (default false) flashes a green ring around new entries. |
Events
| Event | Description |
| swiggle-added | Fired when a swiggle is added and returns the list element containing the selected option in the event callback parameter on detail property. |
| swiggle-delete | Fired when a swiggle is deleted and returns the list item containing the selected in the event callback parameter on detail property. |
| uncomplete-selected | Fired when a single select is completed and the value is in the DataList |
| uncomplete-cleared | Fired when a single select is cleared of its value. |
Examples
HTML
<form id="demoform">
<div class="form-group">
<label for="name">NAME</label>
<input id="name" name="name" class="form-control" type="text"></input>
</div>
<div class="form-group">
<label for="address">ADDRESS</label>
<input multiple id="address" name="address" class="form-control" type="text"></input>
</div>
<div class="form-group">
<label for="language">LANGUAGES</label>
<input multiple id="language" name="language" list="languageDL" class="form-control" type="text"></input>
<datalist id="languageDL" name="languageDL" class="datalist-name">
<option id='eng' value='english' label='English (eng)'></option>
<option id='spn' value='spainish' label='Spanish (spn)'></option>
<option id='fre' value='french' label='French (fre)'></option>
<option id='por' value='portuguese' label='Portuguese (por'></option>
<option id='pol' value='polish' label='Polish (pol)'></option>
</datalist>
</div>
</form>JavaScript
var names = new Uncomplete('name');
var addresses = new Uncomplete('address', { multiple: true, autocomplete: true });
new Uncomplete('language', { multiple: true, duplicates: true });
$.ajax({
url: '/names.json',
method: 'GET',
timeout: 10000
})
.done(function(data) {
data.forEach(function(item) {
names.addOption(names, {
value: item.code,
label: item.name + ' (' + item.username + ')',
id: item.code
});
});
})
.fail(function(error) {
console.log('Handle your errors here!');
});
$.ajax({
url: '/addresses.json',
method: 'GET',
timeout: 10000
})
.done(function(data) {
data.forEach(function(item) {
names.addOption(addresses, {
value: item.code,
label: item.street + ' ' + item.state + ' ' + item.zip,
id: item.code
});
});
})
.fail(function() {
console.log('Handle your errors here!');
});
// jQuery and JavaScript listener examples
});document.querySelector('#name').addEventListener('uncomplete-selected', function(e) {
console.log('Do your awesome logic here! Using this JavaScript listener to uncomplete-seleted');
});
$('#name').on('uncomplete-selected', function(e) {
console.log('Do your awesome logic here! Using this jQuery listener to uncomplete-seleted');
});
document.querySelector('#name').addEventListener('uncomplete-cleared', function(e) {
console.log('Do your awesome logic here! Using this JavaScript listener to uncomplete-cleared');
});
$('#name').on('uncomplete-cleared', function(e) {
console.log('Do your awesome logic here! Using this jQuery listener to uncomplete-cleared');
});
document.querySelector('#language').addEventListener('swiggle-added', function(e) {
console.log('Do your awesome logic here! Using this JavaScript listener to Add', e.detail);
});
$('#language').on('swiggle-added', function(e) {
console.log(
'Do your awesome logic here! Using this jQuery listener to add',
e.originalEvent.detail
);
});
document.querySelector('#language').addEventListener('swiggle-deleted', function(e) {
console.log('Do your awesome logic here! Using this JavaScript listener to delete', e.detail);
});
$('#language').on('swiggle-deleted', function(e) {
console.log(
'Do your awesome logic here! Using this jQuery listener to delete',
e.originalEvent.detail
);
});