{"id":30224181,"url":"https://github.com/varvet/tiny-autocomplete","last_synced_at":"2025-11-11T19:08:08.931Z","repository":{"id":9806764,"uuid":"11787201","full_name":"varvet/tiny-autocomplete","owner":"varvet","description":"A small and snappy (2k minified+gzipped!) JavaScript autocomplete plugin for Zepto and jQuery","archived":false,"fork":false,"pushed_at":"2022-12-09T01:24:26.000Z","size":566,"stargazers_count":34,"open_issues_count":12,"forks_count":16,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-08-08T23:51:26.868Z","etag":null,"topics":["autocomplete","javascript","jquery","zepto"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@varvet/tiny-autocomplete","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/varvet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-31T09:16:04.000Z","updated_at":"2023-12-01T07:14:53.000Z","dependencies_parsed_at":"2023-01-11T20:13:19.451Z","dependency_job_id":null,"html_url":"https://github.com/varvet/tiny-autocomplete","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/varvet/tiny-autocomplete","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varvet%2Ftiny-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varvet%2Ftiny-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varvet%2Ftiny-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varvet%2Ftiny-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varvet","download_url":"https://codeload.github.com/varvet/tiny-autocomplete/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varvet%2Ftiny-autocomplete/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270423157,"owners_count":24580936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","javascript","jquery","zepto"],"created_at":"2025-08-14T13:06:37.933Z","updated_at":"2025-11-11T19:08:03.905Z","avatar_url":"https://github.com/varvet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/varvet/tiny-autocomplete.svg?branch=master)](https://travis-ci.org/varvet/tiny-autocomplete)\n\n# Tiny Autocomplete\n\nA small and snappy (2k minified+gzipped!) JavaScript autocomplete plugin for Zepto and jQuery.\n\n## Why?\n\nBecause the world needs a small and focused autocomplete plugin, not one that's dependent on jQuery UI or Bootstrap or Ember or Angular or whatever. Those have their place too but if you don't feel like pulling down some 200k of JavaScript and CSS just to get autocomplete functionality, this module is for you. The aim of Tiny Autocomplete is to make a plugin that's\n\n- Small footprint\n- Fast\n- Compatible with both Zepto and jQuery (and hopefully most \\$ libraries)\n- Working on tablets and mobile devices\n\nTiny Autocomplete also tries hard to be extendable. There's no abuse of closures or effort to make things private within the plugin so if you want to monkey patch a built-in function, change a setting at runtime, or build a plugin for it - go right ahead!\n\n## Data and templating\n\nTiny Autocomplete is a little picky with its JSON formatting. You can either just supply it with an array of objects (and those can contain arbitrary data), or you can feed it an array of groups. The grouped array items need a property called \"data\" that contains the array of objects instead. It's probably easiest to look at the local data examples if you need help - it's pretty straightforward. If you don't have control over your data, you might be able to hook into the `receivedata` event and rewire it a little - check the bottom of this documentation for an example of that.\n\nTiny Autocomplete also doesn't really assume it knows what your markup wants to look like. There's a built-in default but there's also a micro-templating engine in there which sounds kind of ominous but is actually really nifty. Since you can supply Tiny Autocomplete with your own little mustache-like template string, there's no magic \"name\" or \"id\" attribute or whatever. You can feed it a thumbnail, an icon, 5 levels of `\u003cdiv\u003e` wrapping - the sky's the limit. You can swap out the templating for your own engine, too.\n\nNote: while you can use Tiny Autocomplete with a local data source, the pattern matching implementation is pretty naïve. Intelligently searching through a result set and returning it is what servers do really well, so maybe that's what you want to do?\n\n## Installation\n\n### Global installation\n\nIf you're not using any package managers, put tiny-autocomplete.js after Zepto or jQuery, include tiny-autocomplete.css, and you're good to go!\n\n### Installing through npm\n\nIf you're using npm to manage your dependencies, first install the tiny-autocomplete module:\n\n```javascript\nnpm install -s @varvet/tiny-autocomplete\n```\n\nThen require it in your files and activate it after your jQuery or Zepto library, like so:\n\n```javascript\nvar $ = require(\"jquery\");\nrequire(\"@varvet/tiny-autocomplete\")($, window);\n```\n\n## Demos\n\nThere are some demos included. We should probably put up a server to host them but for now you can check them out via [http-server](https://www.npmjs.org/package/http-server) or something like that. Look at the HTML files to see what they're doing.\n\n## Usage\n\n### Initialize an autocomplete field\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({\n  /* settings */\n});\n```\n\n### Settings\n\n#### url:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ url: \"http://www.example.com/search\" });\n```\n\nThe url to run search queries against.\n\n#### data:\n\n```javascript\n$('.autocomplete').tinyAutocomplete({ data:[...] });\n```\n\nUsed if you want to search through some local JSON data, instead of requesting data from a server. Tiny Autocomplete will search _all_ the fields in your data and return the items where it found a match.\n\n#### method:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ method: \"post\" });\n```\n\nMethod to use - defaults to `get` but you can change it to `post`.\n\n#### onSelect:\n\n```javascript\n$('.autocomplete').tinyAutocomplete({ onSelect:function(el, val){...} });\n```\n\nThis is the method that fires when user has selected an option in the autocomplete list, and it's scoped to the field the user is typing in. You get to decide what to do with the information - possibly load data via AJAX or redirect the user to the selected object's page or something even more clever. If user has just pressed enter without selecting an object, or has selected the lastItemTemplate object, the `val` argument will be blank and you should act on \\$(this).val() instead. Maybe go to the full search page?\n\n#### minChars:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ minChars: 3 });\n```\n\nMinimum number of characters user has to type before autocomplete kicks in. Defaults to `2`.\n\n#### scrollOnFocus:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ scrollOnFocus: true });\n```\n\nFor vertically-challenged touch devices that pop up an on-screen keyboard, it's a good idea to scroll the search field to the top. Tiny Autocomplete tries to guess if it's needed, but you might have a more intelligent heuristic. Then use that to set scrollOnFocus.\n\n#### keyboardDelay:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ keyboardDelay: 400 });\n```\n\nThe delay between user releasing the key and search being performed. Set this high to avoid firing lots of requests while the user is typing, or low for more responsiveness. Defaults to `200` and can be set to `null` to bypass it altogether.\n\n#### queryProperty:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ queryProperty: \"term\" });\n```\n\nThe name of the request property to send in GET or POST request. Defaults to `q`.\n\n#### markAsBold:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ markAsBold: false });\n```\n\nCompare the result set with the typed string and wrap any matches in a `\u003cstrong /\u003e` tag. Processes all the properties in the matched JSON object. Defaults to `true`.\n\n#### grouped:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ grouped: true });\n```\n\nWhether or not Tiny Autocomplete should render the JSON as a grouped list. If set to false, it will expect a simple array of objects, if set to true it will expect the first-level objects to have a \"data\" property containing an array instead:\n\n```javascript\n[\n  {\n    \"title\": \"Larks\",\n    \"coolness\": \"awesome\",\n    \"data\": [\n      {\"title\":\"Clapper Lark\", \"sound\":\"warbling\" ...},\n      {\"title\":\"Spike-heeled Lark\", \"weight\":5 ...}\n  }\n]\n```\n\n#### itemTemplate:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({\n  itemTemplate: '\u003cli class=\"autocomplete-item\"\u003e{{id}}: {{title}}\u003c/li\u003e'\n});\n```\n\nTemplate for an item, using a pseudo-mustache engine. Objects will be passed to the template and it will perform string interpolation, replacing the {{mustachioed}} values with those from the object. For advanced usage, this can be overridden from the JSON-data on a per-group basis, like this:\n\n```javascript\n[\n  {\n    \"title\": \"Larks\",\n    \"template\": \"\u003cli class='autocomplete-item LARK-ITEM'\u003eLark: {{title}}\u003c/li\u003e\",\n    \"data\": [\n      {\"title\":\"Clapper Lark\"},\n      {\"title\":\"Spike-heeled Lark\"}\n  }\n]\n```\n\nDefault template for an item is `\u003cli class=\"autocomplete-item\"\u003e{{title}}\u003c/li\u003e`.\n\n#### groupTemplate:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({\n  groupTemplate:\n    '\u003cli class=\"autocomplete-group\"\u003e\u003ch2\u003e{{title}}\u003c/h2\u003e\u003cul class=\"autocomplete-items\" /\u003e\u003c/li\u003e'\n});\n```\n\nChange template for an item group, when using grouped view. Default is\n\n```html\n\u003cli class=\"autocomplete-group\"\u003e\n  \u003cspan class=\"autocomplete-group-header\"\u003e{{title}}\u003c/span\u003e\n  \u003cul class=\"autocomplete-items\" /\u003e\n\u003c/li\u003e\n```\n\nMake sure your `groupContentName` matches the ul class!\n\n#### wrapClasses:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({\n  wrapClasses: \"autocomplete no-autoinit\"\n});\n```\n\nTo add classes to the list created by tinyAutocomplete, use wrapClasses. The default is \"autocomplete\". This is useful, for example, where using tinyAutocomplete with Materializecss which adds it's own formatting where it sees an autocomplete. Adding the class no-autoinit will prevent materialize from doing this.\n\n#### groupContentName:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ groupContentName: \".my-items\" });\n```\n\nIf you have changed the groupTemplate, you might have to tell Tiny Autocomplete where to put the group's items. Supply it with a class name and it will append the result items there.\n\n#### lastItemTemplate:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({\n  lastItemTemplate:\n    '\u003cli class=\"autocomplete-item autocomplete-item-last\"\u003eShow all results for \"{{title}}\"\u003c/li\u003e'\n});\n```\n\nSet this template if you want to display a last item without any data bound to it. The field's current value will be supplied as {{title}}. This is useful for giving users an \"all results for X\" option at the bottom of the list.\n\n#### templateMethod:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ templateMethod: _.template });\n```\n\nYou can use this to override Tiny Autocomplete's cheap-and-cheerful templating function with something more powerful. The template function takes two arguments. The first argument is the template itself (which is a string) and the second is the object that Tiny Autocomplete passes in to the template to render it. You can use underscore's \"template\" method as a drop-in replacement and there are probably others that work the same way.\n\n#### showNoResults:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ showNoResults: true });\n```\n\nBy default Tiny Autocomplete will not show \"No results\" message when no data is found. Enabling this option will display the \"No results found for foo\" message.\n\n#### noResultsTemplate:\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({\n  noResultsTemplate:\n    '\u003cli class=\"autocomplete-item\"\u003eNo results for {{title}}\u003c/li\u003e'\n});\n```\n\nTemplate for the \"No results found\" message. Will only be shown if `showNoResults` option is enabled. Uses same templating engine as the other templates.\n\n#### maxItemsOnMobile\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ maxItemsOnMobile: 5 });\n```\n\nLimit the number of items displayed when the screen width is smaller than the mobileWidth setting (which is by default 700px).\nSee [mobileWidth](#mobilewidth).\n\nBy default Tiny Autocomplete will set maxItemsOnMobile to **3**\n\n#### mobileWidth\n\n```javascript\n$(\".autocomplete\").tinyAutocomplete({ mobileWidth: 500 });\n```\n\nSee [maxItemsOnMobile](#maxitemsonmobile)\n\nBy default Tiny Autocomplete will set mobileWidth to **700**\n\n### Global defaults\n\nIf you want to, you can set global options for all your autocompletes by setting them on the \\$.tinyAutocomplete.defaults object, like so:\n\n```javascript\n$.tinyAutocomplete.defaults.method = \"post\";\n```\n\n### Change settings at runtime\n\nEasiest way is to just call\n\n```javascript\n$('.autocomplete').tinyAutocomplete({ settings... });\n```\n\nTinyAutocomplete won't instantiate again, it will just change the settings on the object that's already there. If you want to, you can access the settings object on the element itself - it's in el.tinyAutocomplete.settings.\n\n## Events\n\nTiny Autocomplete fires some events for you to hook into. The only ones implemented right now are `beforerequest` and `receivedata`. You can use them to maybe show a spinner somewhere else or something like that, but the `receivedata` event is useful for massaging the data you get back from your server, too. If your json is structured a little differently than expected, perhaps something like this:\n\n```javascript\n{\n  \"thing\": true,\n  \"stuff\": {\n    \"data\": [{\n      \"title\": \"Foo\",\n      \"id\": 1\n    },\n    {\n      \"title\": \"Bar\",\n      \"id\": 2\n    }]\n  }\n}\n```\n\n...you could hook into the `receivedata` event to do this:\n\n```javascript\n$(\".field\")\n  .tinyAutocomplete({\n    url: \"http://www.example.com\"\n  })\n  .on(\"receivedata\", function(ev, tinyAutocomplete, json) {\n    // tinyAutocomplete.json is the variable that Tiny Autocomplete uses\n    // for displaying the options later on\n    tinyAutocomplete.json = json.stuff.data;\n  });\n```\n\n## License\n\n[MIT](http://johanhalse.mit-license.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarvet%2Ftiny-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarvet%2Ftiny-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarvet%2Ftiny-autocomplete/lists"}