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

Methods

Events

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
  );
});