Small Autocomplete/Fuzzy Search Plugin - jQuery Tiny Autocomplete

A small, fast, configurable, mobile-compatible jQuery autocomplete plugin with fuzzy search support that works with both local and external data sources.

More features:

• Highlights matched strings.
• Custom query method.
• Allows to specify max results to show.
• Close on select.
• Custom HTML templates.
• Works with JavaScript/JSON objects.
• Grouped items are supported as well.

How to use it:

1. Load the jQuery library, tiny-autocomplete.css, and tiny-autocomplete.js files in the HTML.

<link rel="stylesheet" href="/path/to/tiny-autocomplete.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/tiny-autocomplete.js"></script>

2. Create a container element next to the autocomplete input that will be used to hold the selected item.

<input id="autocomplete" type="text" name="autocomplete">
<div class="results"></div>

3. Prepare your data as follows:

// local
var birds = [
    {"title":"Southern Screamer", "id":1},
    {"title":"Horned Screamer", "id":2},
    {"title":"Magpie-goose", "id":3}
]

// data.json
[
  {"title":"Southern Screamer", "id":1},
  {"title":"Horned Screamer", "id":2},
  {"title":"Magpie-goose", "id":3},
  {"title":"Swan Goose", "id":4},
  {"title": "Blåmes", "id":5}
]

// grouped data
[
  {
    "title": "Larks",
    "data": [
      {"id":1, "title": "Clapper Lark", "url":"http://tiny-autocomplete.hal.se/larks/1"},
      {"id":2, "title": "Spike-heeled Lark", "url":"http://tiny-autocomplete.hal.se/larks/2"},
      {"id":3, "title": "Greater Hoopoe-lark", "url":"http://tiny-autocomplete.hal.se/larks/3"},
      {"id":4, "title": "Calandra Lark", "url":"http://tiny-autocomplete.hal.se/larks/4"}
    ]
  },
  {
    "title": "Wrens",
    "template": "<li class='autocomplete-item'>{{title}}<br />(sound: {{sound}})</li>",
    "data": [
      {"id":1, "title":"Cactus Wren", "sound":"warbling"},
      {"id":2, "title":"Rock Wren", "sound":"shouting"},
      {"id":3, "title":"Sedge Wren", "sound":"screaming"},
      {"id":4, "title":"Carolina Wren", "sound":"tweeting"}
    ]
  }
]

4. Initialize the autocomplete plugin on the input field and specify the data source you want to use.

// local
$('#autocomplete').tinyAutocomplete({
  data: birds
})

// external
$('#autocomplete').tinyAutocomplete({
  url: '/path/to/birds.json'
})

// grouped
$('#autocomplete').tinyAutocomplete({
  url: '/path/to/grouped.json',
  grouped: true
})

5. Default options to customize the autocomplete:

$('#autocomplete').tinyAutocomplete({

  // min characters to trigger the autocomplete
  minChars: 2,

  // highlights the matched strings
  markAsBold: true,

  // whether or not Tiny Autocomplete should render the JSON as a grouped list.
  grouped: false,
  
  // query proerty
  queryProperty: 'q',

  // query parameters
  queryParameters: {},

  // query method
  method: 'get',

  // scrolls the input field to the top
  // great for mobile device
  scrollOnFocus: 'auto',

  // max number of results to show
  maxItems: 100,
  maxItemsOnMobile: 3,

  // limit the number of items displayed when the screen width is smaller than the mobileWidth setting
  mobileWidth: 700,

  // keyboard delay
  keyboardDelay: 300,

  // closes the dropdown on select
  closeOnSelect: true,

  // custom templates
  lastItemTemplate: null,
  groupTemplate: '<li class="autocomplete-group"><span class="autocomplete-group-header">{{title}}</span><ul class="autocomplete-items" /></li>',
  itemTemplate: '<li class="autocomplete-item">{{title}}</li>',
  noResultsTemplate: '<li class="autocomplete-item">No results for {{title}}</li>', 

  // shows no results
  showNoResults: false,

  // where to put the group's items
  groupContentName: '.autocomplete-items',
  
  // class(es) for the autocomplete dropdown
  wrapClasses: "autocomplete"
  
})

6. Fire an event after received data.

$('#autocomplete').tinyAutocomplete()
.on('receivedata', function(ev, tinyAutocomplete, json) {
  tinyAutocomplete.json = json.stuff.data;
});

Changelog:

2020-09-09

• v1.1.1

2019-10-25

• Adds maxItemsOnMobile config
• Makes mobileWidth configurable

---

This awesome jQuery plugin is developed by varvet. For more Advanced Usages, please check the demo page or visit the official website.