{"id":15910479,"url":"https://github.com/shoppinpal/materializecss-autocomplete","last_synced_at":"2025-03-17T23:32:03.820Z","repository":{"id":57292238,"uuid":"79217594","full_name":"ShoppinPal/Materializecss-Autocomplete","owner":"ShoppinPal","description":"Small material design autocomplete library for materializecss","archived":false,"fork":false,"pushed_at":"2017-09-18T14:52:02.000Z","size":26159,"stargazers_count":12,"open_issues_count":4,"forks_count":2,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2025-03-10T00:55:28.271Z","etag":null,"topics":["angularjs","angularjs-directives","autocomplete","autocomplete-template","material","material-design-autocomplete","material-desing","materializecss-autocomplete","materiazecss"],"latest_commit_sha":null,"homepage":"https://shoppinpalautocomplete.herokuapp.com/#/auto","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/ShoppinPal.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":"2017-01-17T10:45:09.000Z","updated_at":"2023-12-01T07:27:58.000Z","dependencies_parsed_at":"2022-08-27T16:50:52.539Z","dependency_job_id":null,"html_url":"https://github.com/ShoppinPal/Materializecss-Autocomplete","commit_stats":null,"previous_names":["shoppinpal/autocomplete"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShoppinPal%2FMaterializecss-Autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShoppinPal%2FMaterializecss-Autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShoppinPal%2FMaterializecss-Autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShoppinPal%2FMaterializecss-Autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShoppinPal","download_url":"https://codeload.github.com/ShoppinPal/Materializecss-Autocomplete/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244126813,"owners_count":20402181,"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","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":["angularjs","angularjs-directives","autocomplete","autocomplete-template","material","material-design-autocomplete","material-desing","materializecss-autocomplete","materiazecss"],"created_at":"2024-10-06T15:06:42.838Z","updated_at":"2025-03-17T23:32:03.498Z","avatar_url":"https://github.com/ShoppinPal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Autocomplete\n============\nA simple AngularJS directive that allows you create autocomplete input text that list of the data either from a server or local variable\n\nTo see a demo go here: https://shoppinpalautocomplete.herokuapp.com/#/auto\n\nFeatures:\n* custom template support.\n* can show suggestion as a hint .\n* keyboard and mouse control.\n* works in legacy browsers.\n* Auto match.\n* Clear on selection: when you select an item, input field is cleared.\n* custom selection of the templete ```simpleTemplete``` , ```profileTemplete``` and ```colorTemplate```.\n* Blur event handling.\n* Show scrollbar.\n* Show all items.\n* input minimum length to display ```itemList```.\n\n**Requirements:** AngularJS **1.4.x**\n\n# installation \n============\n### Getting Started\nDownload the code, and include the autocomplete.min.js file in your page. Then add the material.autocomplte module to your Angular App file\n\n**1. Download via npm or bower**\n\n\n`bower install materialized.autocomplete --save`\nOr\n`npm install materialized.autocomplete --save`\n\n**2. Link the files in the page header**\n\nFor bower installation:\n\n```html\n\u003cscript src=\"bower_components/materialized.autocomplete/autocomplete/autocomplete.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"bower_components/materialized.autocomplete/autocomplete/css/autocomplete.min.css\"\u003e\n```\n\nFor npm installation\n\n```html\n\u003cscript src=\"node_modules/materialized.autocomplete/autocomplete/autocomplete.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"node_modules/materialized.autocomplete/autocomplete/css/autocomplete.min.css\"\u003e\n```\n\n**3. Include the module as a dependency in your app**\n\n```javascript\n var module = angular.module('testing', ['material.autocomplete']);\n```\n###Methods\n\n\n### Remote Usage \n\nFor the simple Autocomplete template \n```html\n      \u003cmaterial-autocomplete\n        ac-input-name=\"Products\"\n        ac-items=\"test.productList\"\n        ac-selected-item=\"test.dataResultprod\"\n        ac-display-property=\"name\"\n        ac-selected-item-change=\"test.fetchProductList(test.productList)\"\n        ac-search-text=\"test.searchTextProduct\"\n        ac-remote-method=\"test.fetchDataFromServer(test.searchTextProduct)\"\n        ac-place-holder=\" \u0026#128269; \u0026nbsp; \u0026nbsp; Search the items here....\"\n        ac-min-length=\"2\"\u003e\n      \u003c/material-autocomplete\u003e \n```\n\nDemo screenShots:\n\n\n![screen shot 2017-01-25 at 1 21 51 am](https://cloud.githubusercontent.com/assets/24220012/22264264/5afdb872-e29d-11e6-99cf-6e53d0de925d.png)\n![screen shot 2017-01-25 at 1 20 59 am](https://cloud.githubusercontent.com/assets/24220012/22264262/57b14ec2-e29d-11e6-9e83-7f331223172a.png)\n![screen shot 2017-01-25 at 1 21 34 am](https://cloud.githubusercontent.com/assets/24220012/22264263/591adb70-e29d-11e6-9862-8ca586b82cd0.png)\n![screen shot 2017-01-25 at 1 22 20 am](https://cloud.githubusercontent.com/assets/24220012/22264273/5fc74378-e29d-11e6-9728-1da41b3bde49.png)\n![screen shot 2017-01-25 at 1 37 23 am](https://cloud.githubusercontent.com/assets/24220012/22264679/e1f3af48-e29e-11e6-962a-9895cbf00b14.png)\n\n### Local Usage \n###For the color Autocomplete template \n\n```html\n      \u003cmaterial-autocomplete\n        ac-input-name=\"color\"\n        ac-items=\"test.color\"\n        ac-display-property=\"name\"\n        ac-display-color=\"color\"\n        ac-search-text=\"test.searchCol\"\n        ac-min-length=\"1\"\n        ac-place-holder=\" \u0026#128269; \u0026nbsp; \u0026nbsp; Color Autocomplete \"\n        ac-template-style=\"colorTemplate\"\u003e\n      \u003c/material-autocomplete\u003e\n```\nDemo screenShots:\n\n\n![screen shot 2017-02-15 at 7 18 35 pm](https://cloud.githubusercontent.com/assets/24220012/22977171/960f7f5a-f3b3-11e6-8dd1-5e26edf6c1b9.png)\n![screen shot 2017-02-15 at 7 20 09 pm](https://cloud.githubusercontent.com/assets/24220012/22977242/d22e31ac-f3b3-11e6-8fcf-add52b2d1f62.png)\n\n###For the profile Autocomplete template \n```html\n      \u003cmaterial-autocomplete\n        ac-input-name=\"people\"\n        ac-items=\"test.people\"\n        ac-display-property=\"name\"\n        ac-display-email=\"email\"\n        ac-display-picture=\"picture\"\n        ac-search-text=\"test.searchPeople\"\n        ac-min-length=\"1\"\n        ac-place-holder=\" \u0026#128269; \u0026nbsp; \u0026nbsp; Profile Autocomplete \"\n        ac-template-style=\"profileTemplate\"\u003e\n      \u003c/material-autocomplete\u003e\n\n```\nDemo screenShots:\n\n![screen shot 2017-02-15 at 7 22 01 pm](https://cloud.githubusercontent.com/assets/24220012/22977303/1835d380-f3b4-11e6-8e53-71dc0e99f2b0.png)\n![screen shot 2017-02-15 at 7 23 38 pm](https://cloud.githubusercontent.com/assets/24220012/22977351/4bc7412a-f3b4-11e6-8e92-591336228130.png)\n![screen shot 2017-02-15 at 7 24 43 pm](https://cloud.githubusercontent.com/assets/24220012/22977377/6fdb079a-f3b4-11e6-9109-4f644a2f5039.png)\n\n\n\n### Description of attributes\n| Parameter | Type | Description | \n| :------------- |:-------------| :----- | \n| ac-items | `expression` | An expression in the format of `item in items` to iterate over matches for your search. |\n|ac-input-name|`string`|The name attribute given to the input element to be used with FormControlle.|\n|ac-selected-item|`object`| A model to be bind which is selected item.|\n|ac-display-property|`string`|  item diaplay use property name |\n|ac-display-email|`string`| item diaplay use property email |\n|ac-display-picture|`string`| item diaplay use property picture|\n|ac-display-color|`string`|A list of the item diaplay for the color code|\n|ac-selected-item-change|`expression`|An expression to be run each time a new item is selected.|\n|ac-search-text|`expression`| A model to bind the search query text to |\n|ac-remote-method|`expression`|Handle the searchText result and provide the result|\n|ac-place-holder|`string`|Secondary Placeholder text that will display after label move|\n|ac-show-input-name|`string`|Input text for the hiding secondary palceholder|\n|ac-dropdown-items|`expression`|For the calculate dropdown height |\n|ac-clear-button|`expression`|Clear the inputtext if selected value is there|\n|ac-min-length|`number`|Specifies the minimum length of text before autocomplete will make suggestions|\n\n\n\n### Running test suite\n\nIn order to run tests clone repository and run following commands within\nrepo's directory:\n\n```\n1. npm install\n2. bower install\n3. grunt\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoppinpal%2Fmaterializecss-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshoppinpal%2Fmaterializecss-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoppinpal%2Fmaterializecss-autocomplete/lists"}