{"id":19176897,"url":"https://github.com/oasisdigital/angular-material-search-select","last_synced_at":"2025-09-03T13:39:45.759Z","repository":{"id":26843337,"uuid":"110926789","full_name":"OasisDigital/angular-material-search-select","owner":"OasisDigital","description":"Angular-material search-select widget with observable option list","archived":false,"fork":false,"pushed_at":"2023-01-04T21:41:40.000Z","size":14301,"stargazers_count":54,"open_issues_count":28,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-27T10:06:00.916Z","etag":null,"topics":["angular","autocomplete","material-design"],"latest_commit_sha":null,"homepage":"https://oasisdigital.github.io/angular-material-search-select/","language":"TypeScript","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/OasisDigital.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-16T05:21:30.000Z","updated_at":"2024-10-05T21:52:27.000Z","dependencies_parsed_at":"2023-01-14T08:45:22.973Z","dependency_job_id":null,"html_url":"https://github.com/OasisDigital/angular-material-search-select","commit_stats":null,"previous_names":["oasisdigital/angular-material-obs-autocomplete"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OasisDigital%2Fangular-material-search-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OasisDigital%2Fangular-material-search-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OasisDigital%2Fangular-material-search-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OasisDigital%2Fangular-material-search-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OasisDigital","download_url":"https://codeload.github.com/OasisDigital/angular-material-search-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252945803,"owners_count":21829661,"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":["angular","autocomplete","material-design"],"created_at":"2024-11-09T10:31:00.336Z","updated_at":"2025-05-07T19:42:26.155Z","avatar_url":"https://github.com/OasisDigital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Material Search-select control\n\nThis library implements a \"search select\" or \"select with search\" control, to\nmatch (and building on) Angular Material. To provide the UI, the Material\nmat-autocomplete control is used; but the result is not quite an autocomplete\nper se, it really is a search select, intended to pick an item from a list.\n\n## Video demo and explanation\n\n[![Video explaining search-select](https://img.youtube.com/vi/cB2tt-owGbg/0.jpg)](https://www.youtube.com/watch?v=cB2tt-owGbg)\n\n## How it works, and why\n\nThis control handles cases where the displayed 'name' does not match the\ninternal ID. As a developer using this control, you supply methods to translate\nfrom ID to displayed name, and to search data during selection.\n\nBoth directions of data lookup/search are handles asynchronously, suitable for a\ndatabase-based, long list of searchable items.\n\nWe have found this problem comes up regularly on our projects, and have finally\ncreated this reusable solution. This repository/project contains both the\ncomponent itself, and screens that demonstrate its use.\n\n## Try it\n\nDemo running at:\n\nhttps://oasisdigital.github.io/angular-material-search-select/\n\nNPM package:\n\nhttps://www.npmjs.com/package/@oasisdigital/angular-material-search-select\n\n## To use this in a project\n\n```\nnpm install --save @oasisdigital/angular-material-search-select\n```\n\nThere are two ways to consume this code. You can see examples of them in the\nvarious tabs of the demo. \n\n1. Use the provided search-select component, as shown in \"simple\", \"Long\n   slow\", \"real API\".\n2. Write a custom component using only the base class provided in this package;\n   your component will provide all the visuals, but typically doesn't need to\n   provide any code at all. For an example of this, look in the source code,\n   directory `demo-5-multicolumn` and the corresponding multi-column demo tab.\n\nFor better or worse, various aspects of HTML, CSS, Angular, and other tools\nconspire to frequently require option 2. This is the only way to provide full\nflexibility in the appearance of the component, to match your application's\nneeds.\n\nRegardless of which layout approach you choose, at run time you must provide a\nDataSource, which is similar conceptually to the DataSource concept used by a\nmat-table; that interface defines (and application code must provide) methods:\n\n* Method which searches for a values, and provides corresponding display text.\n* Method which takes a search query fragment and provides a list of match\n  candidates.\n* Optionally, a match method that can widen the definition of a matching entry -\n  for example, make it a user can type an entry that varies from a list entry\n  only in upper/lowercase.\n\nStudy the example code in the various `demo-N-*` for more about these methods.\nIt shows several ways to provide such a data source.\n\n## Also an example of how to publish a component\n\nIn addition to being a useful component, we have been using this repository as\nan example of how to publish a Angular component to NPM. You can see these\npatterns in use here, and borrow them for other components:\n\n* Start with an Angular CLI project.\n* Add a module inside, for the components to be packaged.\n* Make the overall application provide a demo, test environment, etc. for\n  the components in the to-be-packaged module.\n* Use ng-packagr: outsource the complexity in bundling to that brilliant\n  package.\n\n## Who?\n\nPrimary authors:\n\n* Kyle Cordes, twitter `@kylecordes`\n* Paul Spears, twitter `@TheEvergreenDev`\n\nWe both work at\n\u003ca href=\"https://oasisdigital.com/\"\u003eOasis Digital\u003c/a\u003e /\n\u003ca href=\"https://angularbootcamp.com/\"\u003eAngular Boot Camp\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foasisdigital%2Fangular-material-search-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foasisdigital%2Fangular-material-search-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foasisdigital%2Fangular-material-search-select/lists"}