{"id":32251138,"url":"https://github.com/chrisyip/allmighty-autocomplete","last_synced_at":"2025-10-22T18:04:14.806Z","repository":{"id":30517376,"uuid":"34071854","full_name":"chrisyip/allmighty-autocomplete","owner":"chrisyip","description":"Simple to use autocomplete directive in a module for AngularJs!","archived":false,"fork":true,"pushed_at":"2015-04-17T04:06:11.000Z","size":192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T02:12:26.796Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"JustGoscha/allmighty-autocomplete","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisyip.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}},"created_at":"2015-04-16T18:01:48.000Z","updated_at":"2015-04-17T04:06:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chrisyip/allmighty-autocomplete","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/chrisyip/allmighty-autocomplete","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisyip%2Fallmighty-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisyip%2Fallmighty-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisyip%2Fallmighty-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisyip%2Fallmighty-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisyip","download_url":"https://codeload.github.com/chrisyip/allmighty-autocomplete/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisyip%2Fallmighty-autocomplete/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280485036,"owners_count":26338517,"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-10-22T02:00:06.515Z","response_time":63,"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":[],"created_at":"2025-10-22T18:04:13.617Z","updated_at":"2025-10-22T18:04:14.798Z","avatar_url":"https://github.com/chrisyip.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"allmighty-autocomplete\n======================\n\nSimple to use autocomplete directive in a module for AngularJS!\nSupports arrow keys to traverse suggestions as well as mouse input.\nYou can load the suggestions from a remote REST API, it also supports promises.\n\nCheckout [the demo](http://justgoscha.github.io/allmighty-autocomplete/) to see what it does.\n\n## Setup\n\nTo use it you need of course AngularJS, so make sure it is loaded first. I always like to use Google's CDN for that:\n\n```html\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js\"\u003e\u003c/script\u003e\n```\n\nAlso you should load the stylesheet of the autocomplete:\n\n```html\n  \u003clink rel=\"stylesheet\" href=\"style/autocomplete.css\"\u003e\n```\n\nThen in your HTML you should load it before the script of your main app. Like this:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"script/autocomplete.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"script/app.js\"\u003e\u003c/script\u003e\n```\n\nIn your main script file you should add it as dependency:\n\n```javascript\nvar app = angular.module('app', ['autocomplete']);\n```\n\n## Usage\n\nIf you now want an autocomplete you can just use the tag `\u003cautocomplete\u003e` tag in your HTML. With the `data` parameter you can pass in an array that will be used for autocompletion. You need to pass there something which is available in the $scope of your controller.\n\nYou can also pass a function that receives changes with the `on-type` attribute. This is useful if you need to load external resources from a REST API, for example, you can then upload the array you passed into `data` and it will automatically use the changed array.\n\n### Attributes\n\n`data` : Pass an array to the autocomplete directive. Should be accessible in the $scope of your controller.\n\n`on-type` : *(optional)* Pass an expression that will be evaluated, when a somebody types something. The full string for any character is named `typed`: `\u003cautocomplete on-type=\"onTyped(typed)\"\u003e\u003c/autocomplete\u003e`.\n\n`on-select` : *(optional)* Pass an expression that will be evaluated, when a suggestion is selected. Selected string is named `suggestion`: `\u003cautocomplete on-select=\"onSelect(suggestion)\"\u003e\u003c/autocomplete\u003e`.\n\n`on-input-focus` : *(optional)* Pass an expression that will be evaluated, when input field is focused: `\u003cautocomplete on-input-focus=\"onInputFocus()\"\u003e\u003c/autocomplete\u003e`\n\n`click-activation` : *(optional)* When `true`, the suggestion box opens on click (unfortunately onfoucs is not implemented properly in most browsers right now). By default it is only activated, when you start typing something.\n\n`ng-model`: What you typed in will be in this variable and accessible in the $scope of the controller.\n\n`attr-placeholder`: *(optional)* Sets desired text as placeholder into the input element of autocomplete directive. By default it's \"start typing...\"\n\n`attr-class`: *(optional)* Change the class of the `div` containing the `input` and suggestions elements, allowing you to change their style according to your needs.\n\n`attr-id`: *(optional)* Change the id of the containing `div` element, see `attrs-class`.\n\n`attr-input-class`: *(optional)* Set the class of the `input` element, allowing you to style the input field directly.\n\n`attr-input-id`: *(optional)* Change the id of the `input` element, see `attrs-input-class`.\n\n`autocomplete-required`: *(optional)* This attribute provides value for an `ng-required` attribute on the directive's `input` field.\n\n## Example\n\nHTML:\n```html\n    \u003cdiv ng-controller=\"MyCtrl\"\u003e\n      \u003cautocomplete ng-model=\"yourchoice\" data=\"movies\" on-type=\"updateMovies\"\u003e\u003c/autocomplete\u003e\n    \u003c/div\u003e\n```\n\nJavaScript:\n```javascript\n\tvar app = angular.module('app', ['autocomplete']);\n\n\tapp.controller('MyCtrl', function($scope, MovieRetriever){\n\t\t$scope.movies = [\"Lord of the Rings\",\n\t\t \t\t\t\t\"Drive\",\n\t\t \t\t\t\t\"Science of Sleep\",\n\t\t \t\t\t\t\"Back to the Future\",\n\t\t \t\t\t\t\"Oldboy\"];\n\n\t\t// gives another movie array on change\n\t\t$scope.updateMovies = function(typed){\n\t\t\t// MovieRetriever could be some service returning a promise\n\t\t    $scope.newmovies = MovieRetriever.getmovies(typed);\n\t\t    $scope.newmovies.then(function(data){\n\t\t      $scope.movies = data;\n\t\t    });\n\t\t}\n\t});\n\n```\n\n## Change log\n\n***17.04.2015***\n+ `on-input-focus` allows you to handle input field's `focus` event\n+ `on-select` \u0026 `on-type` now accept multiple arguments\n\n***07.03.2014***\n+ `attr-input-class` \u0026 `attr-input-id` allow you to choose class and id of the input field. Handy when wanting to add bootstrap styles to the input field\n\n***25.02.2014***\n+ `attr-class` \u0026 `attr-id` allow you to choose class and id of the div where the autocomplete is contained, makes it more customizable\n+ `placeholder` renamed into `attr-placeholder`\n\n***14.02.2014***\n+ got rid of jQuery dependency\n\n***13.02.2014***\n\n+ ng-model can now be used outside to obtain the current search parameter\n+ hiding suggestions on blur\n\n***31.01.2014***\n+ Stop showing suggestions on pushing escape\n+ select if suggestions should be shown after clicking on input with new parameter `click-activation`\n+ Added customizable placeholders for input line\n+ FIXED multiple autocomplete directives in one controller are now possible and behave as expected\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisyip%2Fallmighty-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisyip%2Fallmighty-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisyip%2Fallmighty-autocomplete/lists"}