jquery-autocompleter v0.7.0

jQuery Autocompleter Plugin

Demo

Here: Example with Crayola colors.

Usage

Installation

npm:

npm install --save jquery-autocompleter

Yarn:

yarn add jquery-autocompleter

Add plugin to your project

• include jQuery:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

• include plugin's code:

  <!-- Styles -->
  <link rel="stylesheet" href="css/jquery.autocompleter.css" />
  
  <!-- Scripts -->
  <script src="js/jquery.autocompleter.min.js"></script>

• call the plugin:

  $("input").autocompleter({
    /* options */
  });

Examples

• remote url

  $(function () {
    $("input").autocompleter({ source: "path/to/get_data_request" });
  });

• plain

  var data = [
    { value: 1, label: "one" },
    { value: 2, label: "two" },
    { value: 3, label: "three" },
  ];
  
  $(function () {
    $("input").autocompleter({ source: data });
  });

Options

Autocompleter has the following options:

Methods

Change option after plugin is defined

$("#input").autocompleter("option", data);

For example:

$("#input").autocompleter("option", {
  limit: 5,
  template:
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}',
});

Open list

$("#input").autocompleter("open");

Close list

$("#input").autocompleter("close");

Destroy plugin

$("#input").autocompleter("destroy");

Clear all cache

$.autocompleter("clearCache");

Set defaults

$.autocompleter("defaults", {
  customClass: "myClassForAutocompleter",
});

One more example

Autocompleter for the first name input with caching, match highlighting and 5 results limit. Remote response depends on a gender:

Form markup

<fieldset>
  <label>Male</label>
  <input type="radio" name="gender" value="male" checked="checked" />

  <label>Female</label>
  <input type="radio" name="gender" value="female" />

  <label>Other</label>
  <input type="radio" name="gender" value="other" />

  <label>First Name</label>
  <input type="text" name="firstname" id="firstname" />
</fieldset>

Code

$(function () {
  $("#firstname").autocompleter({
    source: "https://EXAMPLE_API_ENDPOINT.com/api/search/name",
    limit: 5,
    cache: true,
    combine: function (params) {
      var gender = $("input:radio[name=gender]:checked").val();

      // passing params to match endpoint
      return {
        q: params.query,
        count: params.limit,
        gender: gender,
      };
    },
    format: function (data) {
      // map response data to match autocompleter
      return data.entries.map(function (item) {
        return {
          label: item.name,
          value: item.slug,
        };
      });
    },
    callback: function (value, index, object) {
      console.log(
        "Value " + value + " are selected (with index " + index + ")."
      );
      console.log(object);
    },
  });
});

Markup

div (node) -> ul (list) -> li (item).

<div class="autocompleter" id="autocompleter-1">
  <ul class="autocompleter-list">
    <li class="autocompleter-item">First</li>
    <!-- ... -->
    <li class="autocompleter-item">Last</li>
  </ul>
</div>