{"id":19475960,"url":"https://github.com/airbr/ngchip-dialog-search","last_synced_at":"2026-05-17T17:03:45.340Z","repository":{"id":74388352,"uuid":"84119744","full_name":"airbr/ngchip-dialog-search","owner":"airbr","description":"Angular 1.x/Angular Material module for searching/adding/filtering/saving md-chips from a md-dialog ","archived":false,"fork":false,"pushed_at":"2017-06-25T02:15:22.000Z","size":22,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-13T00:56:41.011Z","etag":null,"topics":["angular-directives","angular-material","angularjs","dialog","javascript","md-chips","ui-design"],"latest_commit_sha":null,"homepage":null,"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/airbr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-06T20:53:46.000Z","updated_at":"2020-10-03T04:50:44.000Z","dependencies_parsed_at":"2023-06-27T22:46:36.192Z","dependency_job_id":null,"html_url":"https://github.com/airbr/ngchip-dialog-search","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/airbr/ngchip-dialog-search","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbr%2Fngchip-dialog-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbr%2Fngchip-dialog-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbr%2Fngchip-dialog-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbr%2Fngchip-dialog-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airbr","download_url":"https://codeload.github.com/airbr/ngchip-dialog-search/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbr%2Fngchip-dialog-search/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33147339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["angular-directives","angular-material","angularjs","dialog","javascript","md-chips","ui-design"],"created_at":"2024-11-10T19:35:48.665Z","updated_at":"2026-05-17T17:03:45.312Z","avatar_url":"https://github.com/airbr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\n# Get started\n\n\n#### Local\n\n1. Clone the repository `git clone https://github.com/airbr/ngchip-dialog-search.git`\n2. Open `index.html`\n\n\t_TODO:_ Add instructions for local installation of dependencies. Currently using CDN's for the following dependencies:\n\t\n\tCSS:\n\t\n\t* Angular Material 1.1.3\n\t* Google Fonts Roboto\n\n\t\n\tJS:\n\t\n\t* AngularJS 1.6.2\n\t* Angular Route 1.6.2\n\t* Angular Animate 1.6.2\n\t* Angular Aria 1.6.2\n\t* Angular Messages 1.6.2\n\t* [SVG Assets Cache](https://github.com/angular/material/blob/master/docs/guides/CODEPEN.md)\n\t* Angular Material 1.1.3\n\n\u003c!--### Suggestions for testing:\n\n1. Change out JSON Array - either change the name of chips from `thing` to match your array properties or to adjust your array items proprties to `thing` to be visible on the chip label/ avoid errors.\n2. Try putting a reasonably big JSON array in there. The Dialog should still load quickly and the suggestions/chips you see should still perform quickly.\n3. Try throwing at the search input / selection of chips all the possibilities you could think of including:\n\t* Auto-completion if you type out the suggestion in full\n\t* Seeing selected/non-selected chips filtered below as you type\n\t* Selected/de-selecting chips\n\t* The view of selected of chips at rest i.e. no input in the search text\n4. Look at the 'dev console' button to seen an example of the kind of array could comes out of the choices you submitted for practical use/interaction with the back-end.--\u003e\n\n### Summary / Background\n\n\u003e a piece of angularJS code aiming to combine the ngMaterial directives [`md-dialog`](https://material.angularjs.org/latest/api/directive/mdDialog), [`md-chips`](https://material.angularjs.org/latest/api/directive/mdChips) and [`md-autocomplete`](https://material.angularjs.org/latest/api/directive/mdAutocomplete) to create a reasonably re-usable and performant UI module with the ability to:\n\u003e \n  * Open a `md-dialog` that contains the following interface in its own scope:\n  * The ability to input text to search over a JSON Array and present autocomplete suggestions, simultaneously filter visible `md-chips` in the view based on the same searchtext\n  * Represent those array items as `md-chips` in the view with a simple label but also retain their association to the full JSON from the `ng-model` when those chips are selected. Also gives the ability to search/filter based on those non-visible JSON properties in the view, i.e. a 'soft' or 'fuzzy' search.\n  * Select and add these `md-chips` to an array for submission either by selecting them onscreen or entering them from the input i.e. for a form as part of a potential sign-up process or other user interaction.\n  \t* Also ability to remove these chips by de-selecting them visually\n  * Necessary CSS/Angular Logic applied to depict chips that have been selected/ avoid duplicates etc including:\n   * Style selected chips with ng-class, requiring targeting a class from a grandparent selector since you cannot apply styles directly on md-chip-template\n   * Show chips with these applied selected styles as they are being filtered in the search\n  * Close the `md-dialog` and submit the choices you have made that are saved in a variable in JSON for handing off\n  \n#### Online\n\n[Online Demo hosted on Codepen of commit `04ff4f0` / `v0.2`](https://codepen.io/airbridge/pen/mWrYxv)\n\n![](https://i.imgur.com/OV0Zbwy.gif)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbr%2Fngchip-dialog-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairbr%2Fngchip-dialog-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbr%2Fngchip-dialog-search/lists"}