{"id":32252430,"url":"https://github.com/fitiskin/jquery-autocompleter","last_synced_at":"2026-04-07T15:32:23.960Z","repository":{"id":16565119,"uuid":"19318988","full_name":"fitiskin/jquery-autocompleter","owner":"fitiskin","description":"Easy customisable and with localStorage cache support.","archived":false,"fork":false,"pushed_at":"2024-06-18T20:50:12.000Z","size":1218,"stargazers_count":179,"open_issues_count":4,"forks_count":83,"subscribers_count":11,"default_branch":"main","last_synced_at":"2026-02-19T01:24:23.439Z","etag":null,"topics":["autocomplete","javascript","jquery","jquery-plugin","search","select"],"latest_commit_sha":null,"homepage":"https://fitiskin.ru/jquery-autocompleter/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fitiskin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-04-30T15:54:59.000Z","updated_at":"2026-02-14T18:01:43.000Z","dependencies_parsed_at":"2023-02-10T16:00:30.670Z","dependency_job_id":"ee5070be-d99b-4795-9aa8-e02bedea8d79","html_url":"https://github.com/fitiskin/jquery-autocompleter","commit_stats":{"total_commits":100,"total_committers":9,"mean_commits":11.11111111111111,"dds":0.5900000000000001,"last_synced_commit":"5719dc3fe3f42bf1060ca98aeacacfca37d2b663"},"previous_names":["artemfitiskin/jquery-autocompleter"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/fitiskin/jquery-autocompleter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitiskin%2Fjquery-autocompleter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitiskin%2Fjquery-autocompleter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitiskin%2Fjquery-autocompleter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitiskin%2Fjquery-autocompleter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fitiskin","download_url":"https://codeload.github.com/fitiskin/jquery-autocompleter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitiskin%2Fjquery-autocompleter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31518523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","jquery-plugin","search","select"],"created_at":"2025-10-22T18:17:51.504Z","updated_at":"2026-04-07T15:32:23.941Z","avatar_url":"https://github.com/fitiskin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Autocompleter Plugin\n\n\u003cp\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/jquery-autocompleter\"\u003e\n    \u003cimg alt=\"\" src=\"https://badgen.net/npm/v/jquery-autocompleter\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Package size\" href=\"https://bundlephobia.com/result?p=jquery-autocompleter\"\u003e\n    \u003cimg alt=\"\" src=\"https://badgen.net/bundlephobia/minzip/jquery-autocompleter\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://github.com/fitiskin/jquery-autocompleter/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"\" src=\"https://badgen.net/npm/license/jquery-autocompleter\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Demo\n\nHere: [Example with Crayola colors](https://fitiskin.ru/jquery-autocompleter/).\n\n## Usage\n\n#### Installation\n\n[npm](https://www.npmjs.com/):\n\n`npm install --save jquery-autocompleter`\n\n[Yarn](https://yarnpkg.com/):\n\n`yarn add jquery-autocompleter`\n\n#### Add plugin to your project\n\n- include jQuery:\n\n  ```html\n  \u003cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"\u003e\u003c/script\u003e\n  ```\n\n- include plugin's code:\n\n  ```html\n  \u003c!-- Styles --\u003e\n  \u003clink rel=\"stylesheet\" href=\"css/jquery.autocompleter.css\" /\u003e\n\n  \u003c!-- Scripts --\u003e\n  \u003cscript src=\"js/jquery.autocompleter.min.js\"\u003e\u003c/script\u003e\n  ```\n\n- call the plugin:\n\n  ```javascript\n  $(\"input\").autocompleter({\n    /* options */\n  });\n  ```\n\n#### Examples\n\n- remote url\n\n  ```javascript\n  $(function () {\n    $(\"input\").autocompleter({ source: \"path/to/get_data_request\" });\n  });\n  ```\n\n- plain\n\n  ```javascript\n  var data = [\n    { value: 1, label: \"one\" },\n    { value: 2, label: \"two\" },\n    { value: 3, label: \"three\" },\n  ];\n\n  $(function () {\n    $(\"input\").autocompleter({ source: data });\n  });\n  ```\n\n## Options\n\nAutocompleter has the following options:\n\n| Name             | Type     | Description                                                                                                                                           | Deafult |\n| ---------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------ |\n| source           | str, obj | URL to the server or a local object                                                                                                                   | null    |\n| asLocal          | bool     | Parse remote response as local source                                                                                                                 | false   |\n| empty            | bool     | Launch if value is empty                                                                                                                              | true    |\n| limit            | int      | Number of results to be displayed                                                                                                                     | 10      |\n| minLength        | int      | Minimum length for autocompleter                                                                                                                      | 0       |\n| delay            | int      | Few milliseconds to defer the request                                                                                                                 | 0       |\n| customClass      | array    | Array with custom classes for autocompleter element                                                                                                   | []      |\n| cache            | bool     | Save xhr data to localStorage to avoid the repetition of requests                                                                                     | true    |\n| cacheExpires     | int      | localStorage data lifetime in sec (0 to disable cache expire)                                                                                         | 86400   |\n| focusOpen        | bool     | Launch autocompleter when input gets focus                                                                                                            | true    |\n| enterSelect      | bool     | Allows to select using enter key                                                                                                                      | true    |\n| hint             | bool     | Add hint to input with first matched label, correct styles should be installed                                                                        | false   |\n| selectFirst      | bool     | If set to `true`, first element in autocomplete list will be selected automatically, ignore if changeWhenSelect is on                                 | false   |\n| changeWhenSelect | bool     | Allows to change input value using arrow keys navigation in autocomplete list                                                                         | true    |\n| highlightMatches | bool     | This option defines `\u003cstrong\u003e` tag wrap for matches in autocomplete results                                                                           | false   |\n| ignoredKeyCode   | array    | Array with ignorable keycodes, by default: `9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145`  | []      |\n| customLabel      | str      | The name of object's property which will be used as a label                                                                                           | false   |\n| customValue      | str      | The name of object's property which will be used as a value                                                                                           | false   |\n| onBeforeSend     | function | This function is triggered before an ajax request                                                                                                     | \\$.noop |\n| onBeforeShow     | function | This function is triggered when the list is ready to be shown                                                                                         | \\$.noop |\n| onEmpty          | function | If data list if empty, trigger this function                                                                                                          | \\$.noop |\n| onItem           | function | This function is triggered when each item is being prepared to be shown                                                                               | \\$.noop |\n| onListOpen       | function | This function is triggered when the list is shown                                                                                                     | \\$.noop |\n| onListClose      | function | This function is triggered when the list is hidden                                                                                                    | \\$.noop |\n| onBeforeLaunch   | function | The event was triggered before the new request (including local cache)                                                                                | \\$.noop |\n| template         | str      | Custom template for list items. For example: `\u003cspan\u003e{{ label }} is {{ customPropertyFromSource }}\u003c/span\u003e`. Template appends to `.autocompleter-item`. | false   |\n| offset           | str      | Source response offset, for example: `\"response.items.posts\"`. \u003cbr /\u003e**@deprecated** use `format` instead                                             | false   |\n| format           | function | Format response payload to return source data                                                                                                         | null    |\n| combine          | function | Returns an object which extends ajax data. Useful if you want to pass some additional server options                                                  | \\$.noop |\n| callback         | function | Select value callback function. Arguments: `value`, `index`, `object`                                                                                 | \\$.noop |\n\n## Methods\n\n#### Change option after plugin is defined\n\n```javascript\n$(\"#input\").autocompleter(\"option\", data);\n```\n\nFor example:\n\n```javascript\n$(\"#input\").autocompleter(\"option\", {\n  limit: 5,\n  template:\n    '\u003cimg src=\"{{ image }}\" alt=\"Image for autocompleter list item\" /\u003e {{ label }}',\n});\n```\n\n#### Open list\n\n```javascript\n$(\"#input\").autocompleter(\"open\");\n```\n\n#### Close list\n\n```javascript\n$(\"#input\").autocompleter(\"close\");\n```\n\n#### Destroy plugin\n\n```javascript\n$(\"#input\").autocompleter(\"destroy\");\n```\n\n#### Clear all cache\n\n```javascript\n$.autocompleter(\"clearCache\");\n```\n\n#### Set defaults\n\n```javascript\n$.autocompleter(\"defaults\", {\n  customClass: \"myClassForAutocompleter\",\n});\n```\n\n## One more example\n\nAutocompleter for the first name input with caching, match highlighting and 5 results limit. Remote response depends on a gender:\n\n#### Form markup\n\n```html\n\u003cfieldset\u003e\n  \u003clabel\u003eMale\u003c/label\u003e\n  \u003cinput type=\"radio\" name=\"gender\" value=\"male\" checked=\"checked\" /\u003e\n\n  \u003clabel\u003eFemale\u003c/label\u003e\n  \u003cinput type=\"radio\" name=\"gender\" value=\"female\" /\u003e\n\n  \u003clabel\u003eOther\u003c/label\u003e\n  \u003cinput type=\"radio\" name=\"gender\" value=\"other\" /\u003e\n\n  \u003clabel\u003eFirst Name\u003c/label\u003e\n  \u003cinput type=\"text\" name=\"firstname\" id=\"firstname\" /\u003e\n\u003c/fieldset\u003e\n```\n\n#### Code\n\n```javascript\n$(function () {\n  $(\"#firstname\").autocompleter({\n    source: \"https://EXAMPLE_API_ENDPOINT.com/api/search/name\",\n    limit: 5,\n    cache: true,\n    combine: function (params) {\n      var gender = $(\"input:radio[name=gender]:checked\").val();\n\n      // passing params to match endpoint\n      return {\n        q: params.query,\n        count: params.limit,\n        gender: gender,\n      };\n    },\n    format: function (data) {\n      // map response data to match autocompleter\n      return data.entries.map(function (item) {\n        return {\n          label: item.name,\n          value: item.slug,\n        };\n      });\n    },\n    callback: function (value, index, object) {\n      console.log(\n        \"Value \" + value + \" are selected (with index \" + index + \").\"\n      );\n      console.log(object);\n    },\n  });\n});\n```\n\n## Markup\n\n`div (node) -\u003e ul (list) -\u003e li (item)`.\n\n```html\n\u003cdiv class=\"autocompleter\" id=\"autocompleter-1\"\u003e\n  \u003cul class=\"autocompleter-list\"\u003e\n    \u003cli class=\"autocompleter-item\"\u003eFirst\u003c/li\u003e\n    \u003c!-- ... --\u003e\n    \u003cli class=\"autocompleter-item\"\u003eLast\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitiskin%2Fjquery-autocompleter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffitiskin%2Fjquery-autocompleter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitiskin%2Fjquery-autocompleter/lists"}