Small Autocomplete/Fuzzy Search Plugin - jQuery Tiny Autocomplete

File Size: 216 KB
Views Total: 3485
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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":""},
      {"id":2, "title": "Spike-heeled Lark", "url":""},
      {"id":3, "title": "Greater Hoopoe-lark", "url":""},
      {"id":4, "title": "Calandra Lark", "url":""}
    "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
  data: birds

// external
  url: '/path/to/birds.json'

// grouped
  url: '/path/to/grouped.json',
  grouped: true

5. Default options to customize the autocomplete:


  // 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.

.on('receivedata', function(ev, tinyAutocomplete, json) {
  tinyAutocomplete.json =;



  • v1.1.1


  • 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.