{"id":13696880,"url":"https://github.com/kadoshms/ionic2-autocomplete","last_synced_at":"2026-01-17T11:08:52.527Z","repository":{"id":57172521,"uuid":"66005644","full_name":"kadoshms/ionic2-autocomplete","owner":"kadoshms","description":"Ionic 2 autocomplete component","archived":false,"fork":false,"pushed_at":"2023-10-10T20:36:25.000Z","size":246,"stargazers_count":147,"open_issues_count":33,"forks_count":108,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-10-26T08:23:24.021Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/kadoshms.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2016-08-18T14:49:55.000Z","updated_at":"2025-09-19T04:11:10.000Z","dependencies_parsed_at":"2024-02-03T11:47:42.510Z","dependency_job_id":null,"html_url":"https://github.com/kadoshms/ionic2-autocomplete","commit_stats":{"total_commits":170,"total_committers":22,"mean_commits":"7.7272727272727275","dds":"0.20588235294117652","last_synced_commit":"9c0ed3148e17bcdd975b60b211a1a03bb68b2201"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/kadoshms/ionic2-autocomplete","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadoshms%2Fionic2-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadoshms%2Fionic2-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadoshms%2Fionic2-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadoshms%2Fionic2-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kadoshms","download_url":"https://codeload.github.com/kadoshms/ionic2-autocomplete/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kadoshms%2Fionic2-autocomplete/sbom","scorecard":{"id":547007,"data":{"date":"2025-08-11","repo":{"name":"github.com/kadoshms/ionic2-autocomplete","commit":"9c0ed3148e17bcdd975b60b211a1a03bb68b2201"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":3,"reason":"Found 7/21 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 16 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-20T09:47:56.595Z","repository_id":57172521,"created_at":"2025-08-20T09:47:56.595Z","updated_at":"2025-08-20T09:47:56.595Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28506598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T10:25:30.148Z","status":"ssl_error","status_checked_at":"2026-01-17T10:25:29.718Z","response_time":85,"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":[],"created_at":"2024-08-02T18:00:49.030Z","updated_at":"2026-01-17T11:08:52.499Z","avatar_url":"https://github.com/kadoshms.png","language":"TypeScript","readme":"# Ionic2-auto-complete\n\n## Disclaimer ##\nDue to a very little free time, I am not available for mainting and supporting this project, so contributions are very welcome!!!\n\n\n## About ##\nThis is a component based on Ionic's search-bar component, with the addition of auto-complete abillity.\nThis component is super simple and light-weight. Just provide the data, and let the fun begin.\n\nThis is a **free software** please feel free to contribute! :)\n\n![](example.gif)\n\n### Angular 5.0 Support\n\nSince Angular 5.0 was out, a several issues occured. \nThanks to @CoreyCole, most of them are gone now :)\n\nIf you encounter another issues regrading Angular 5, pleae file an issue!\n\nFor more info: https://github.com/kadoshms/ionic2-autocomplete/issues/128\n\n### Installation\n```\n$ npm install ionic2-auto-complete --save\n```\n\n#### Usage guide\n\nOpen `app.module.ts` and add the following import statetment:\n\n``\nimport { AutoCompleteModule } from 'ionic2-auto-complete';\n``\n\nThen, add the `AutoCompleteModule` to the `imports` array:\n\n```\n@NgModule({\n  declarations: [\n    MyApp,\n    HomePage,\n    TabsPage,\n    MyItem\n  ],\n  imports: [\n    BrowserModule,\n    AutoCompleteModule,\n    FormsModule,\n    HttpModule,\n    IonicModule.forRoot(MyApp)\n  ],\n  ...\n  ...\n})\nexport class AppModule {}\n```\nNow let's import the styling file. Open `app.scss` and add the following:\n\n`@import \"../../node_modules/ionic2-auto-complete/auto-complete\";`\n\nNow, let's add the component to our app!\n\nAdd the following tag to one of your pages, in this example I am using the Homepage:\n\n`\u003cion-auto-complete\u003e\u003c/ion-auto-complete\u003e`\n\nNow let's see what wev'e done so far by running `ionic serve`.\n\nNow, when everything is up and running you should see a nice search-bar component. Open the **developer console** and try to type something.\n\nOh no! something is wrong. You probably see an excpetion similiar to :\n\n`EXCEPTION: Error in ./AutoCompleteComponent class AutoCompleteComponent - inline template:1:21`\n\nThis is totally cool, for now. The exception shows up since we did not provide a **dataProvider** to the autocomplete component.\n\n**How does it work?** So, ionic2-auto-complete is not responsible for getting the data from the server. As a developer, you should implement your own service which eventually be responsible to get the data for the component to work, as well we determing how many results to show and/or their order of display.\n\nSo there are two possibilities to provide data:\n\n1. A simple function that returns an Array of items\n2. An instance of 'AutocompleteService' (specified below)\n\nLet's start by creating the service:\n\n```\nimport {AutoCompleteService} from 'ionic2-auto-complete';\nimport { Http } from '@angular/http';\nimport {Injectable} from \"@angular/core\";\nimport 'rxjs/add/operator/map'\n\n@Injectable()\nexport class CompleteTestService implements AutoCompleteService {\n  labelAttribute = \"name\";\n\n  constructor(private http:Http) {\n\n  }\n  getResults(keyword:string) {\n    return this.http.get(\"https://restcountries.eu/rest/v1/name/\"+keyword)\n      .map(\n        result =\u003e\n        {\n          return result.json()\n            .filter(item =\u003e item.name.toLowerCase().startsWith(keyword.toLowerCase()) )\n        });\n  }\n}\n\n\n```\n\nBy implementing an AutoCompleteService interface, you must implement two properties:\n\n1. **labelAttribute** [string] - which is the name of the object's descriptive property (leaving it null is also an option for non-object results)\n2. **getResults(keyword)** [() =\u003e any] - which is the method responsible for getting the data from server.\n\nThe **getResults** method can return one of:\n- an Observable that produces an array\n- a Subject (like an Observable)\n- a Promise that provides an array\n- directly an array of values\n\nIn the above example, we fetch countries data from the amazing https://restcountries.eu/ project, and we filter the results accordingly.\n\n**Important!** the above example is just an example! the best practice would be to let the server to the filtering for us! Here, since I used the countries-api, that's the best I could do.\n\nNow, we need to let ionic2-auto-complete that we want to use CompleteTestService as the data provider, edit *home.ts* and add `private completeTestService: CompleteTestService` to the constructor argument list.\nShould look like that:\n```\nimport { Component } from '@angular/core';\nimport { NavController } from 'ionic-angular';\nimport { CompleteTestService } from '../../providers/CompleteTestService';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n\n  constructor(public navCtrl: NavController, public completeTestService: CompleteTestService) {\n\n  }\n\n}\n\n```\n\nThan, in *home.html* modify `\u003cion-auto-complete\u003e`:\n```\n\u003cion-auto-complete [dataProvider]=\"completeTestService\"\u003e\u003c/ion-auto-complete\u003e\n```\n\nNow, everything should be up and ready :)\n\n\n----------------------------------------------------------------------------\n\n### Use auto-complete in Angular FormGroup ###\n\n#### Use labelAttribute as both label and form value (default behavior) ####\n\nBy default, if your **dataProvider** provides an array of objects, the `labelAttribute` property is used to take the good field of each object to display in the suggestion list. For backward compatibility, if nothing is specified, this attribute is also used to grab the value used in the form.\n\nThe page should look like this:\n\n```\nimport { Component } from '@angular/core';\nimport { NavController } from 'ionic-angular';\nimport { CompleteTestService } from '../../providers/CompleteTestService';\nimport { FormGroup, Validators, FormControl } from '@angular/forms'\n\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n  myForm: FormGroup\n\n  constructor(public navCtrl: NavController, public completeTestService: CompleteTestService) {\n  }\n\n  ngOnInit(): void {\n    this.myForm = new FormGroup({\n      country: new FormControl('', [\n        Validators.required\n      ])\n    })\n  }\n\n  submit(): void {\n    let country = this.myForm.value.country\n  }\n\n}\n```\n\nThen, in *home.html* place the auto-complete component in the form group and add the `formControlName` attribute:\n```\n\u003cform [formGroup]=\"myForm\" (ngSubmit)=\"submit()\" novalidate\u003e\n  \u003cdiv class=\"ion-form-group\"\u003e\n    \u003cion-auto-complete [dataProvider]=\"completeTestService\" formControlName=\"country\"\u003e\u003c/ion-auto-complete\u003e\n  \u003c/div\u003e\n  \u003cbutton ion-button type=\"submit\" block\u003eAdd country\u003c/button\u003e\n\u003c/form\u003e\n```\n\nNow when the `submit` method is called, the `country` is the selected country **name**.\n\n**NOTE** As said above by default for backward compatibility, only the name is used as value not the country object.\n\n\n#### How to use another field as form value ? ####\n\nTo indicate that you don't want the label as value but another field of the country object returned by the REST service, you can specify the attribute **formValueAttribute** on your dataProvider. For example, we want to use the country numeric code as value and still use the country name as label.\n\nLet's update the service (juste declare `formValueAttribute` property):\n\n```\nimport {AutoCompleteService} from 'ionic2-auto-complete';\nimport { Http } from '@angular/http';\nimport {Injectable} from \"@angular/core\";\nimport 'rxjs/add/operator/map'\n\n@Injectable()\nexport class CompleteTestService implements AutoCompleteService {\n  labelAttribute = \"name\";\n  formValueAttribute = \"numericCode\"\n\n  constructor(private http:Http) {\n  }\n\n  getResults(keyword:string) {\n    return this.http.get(\"https://restcountries.eu/rest/v1/name/\"+keyword)\n      .map(\n        result =\u003e\n        {\n          return result.json()\n            .filter(item =\u003e item.name.toLowerCase().startsWith(keyword.toLowerCase()) )\n        });\n  }\n}\n```\n\nNow when the `submit` method is called, the `country` is the selected country **numericCode**. The name is still used as the label.\n\n#### How to use the whole object as form value ? ####\n\nSimply set `formValueAttribute` to empty string:\n```\nimport {AutoCompleteService} from 'ionic2-auto-complete';\nimport { Http } from '@angular/http';\nimport {Injectable} from \"@angular/core\";\nimport 'rxjs/add/operator/map'\n\n@Injectable()\nexport class CompleteTestService implements AutoCompleteService {\n  labelAttribute = \"name\";\n  formValueAttribute = \"\"\n\n  constructor(private http:Http) {\n  }\n\n  getResults(keyword:string) {\n    return this.http.get(\"https://restcountries.eu/rest/v1/name/\"+keyword)\n      .map(\n        result =\u003e\n        {\n          return result.json()\n            .filter(item =\u003e item.name.toLowerCase().startsWith(keyword.toLowerCase()) )\n        });\n  }\n}\n```\n\n\n----------------------------------------------------------------------------\n\n### Styling ###\n\nCurrently for best visual result, use viewport size / fixed size (pixels) if you are interested in resizing the component:\n```\nion-auto-complete {\n  width: 50vw;\n}\n```\n\n\u003c!--\n### How to concatenate several fields as label ? ###\n\n\nThe auto-complete component allows you to use templates for customize the display of each suggestion. But in many cases, the default template is good. However, you need to concatenate several fields (like firstname and lastname) to produce a full label. In that case, you can declare a method named `getItemLabel` instead of using `labelAttribute`.\n\nFor example, we want to display the country name and the population:\n```\nimport {AutoCompleteService} from 'ionic2-auto-complete';\nimport { Http } from '@angular/http';\nimport {Injectable} from \"@angular/core\";\nimport 'rxjs/add/operator/map'\n\n@Injectable()\nexport class CompleteTestService implements AutoCompleteService {\n  formValueAttribute = \"\"\n\n  constructor(private http:Http) {\n  }\n\n  getResults(keyword:string) {\n    return this.http.get(\"https://restcountries.eu/rest/v1/name/\"+keyword)\n      .map(\n        result =\u003e\n        {\n          return result.json()\n            .filter(item =\u003e item.name.toLowerCase().startsWith(keyword.toLowerCase()) )\n        });\n  }\n\n  getItemLabel(country: any) {\n    return country.name + ' (' + country.population + ')'\n  }\n}\n```\n--\u003e\n\n\n### Custom Templates (for versions 1.5.0 and above) ###\n\n**NOTE** this feature uses ng-template which was introduced in Angular versions 4.0.0 and later, it might not work in earlier versions.\n\nIonic2-auto-complete also supports custom templates for the list items.\nActually, you can display any attribute associated with your data items by simply accessing it from the `data` input class member in the template.\n\nFor example:\n\nLet's assume that in addition to the country name, we also wish to display the country flag.\nFor that, we use the `ng-template` directive, which let's us pass the template as an input to the component.\n\nOn the page where your `ion-auto-complete` is located:\n\n```\n\u003cng-template #withFlags let-attrs=\"attrs\"\u003e\n  \u003cimg src=\"assets/image/flags/{{attrs.data.name}}.png\" class=\"flag\" /\u003e \u003cspan [innerHTML]=\"attrs.data.name | boldprefix:attrs.keyword\"\u003e\u003c/span\u003e\n\u003c/ng-template\u003e\n\u003cion-auto-complete [dataProvider]=\"service\" [template]=\"withFlags\"\u003e\u003c/ion-auto-complete\u003e\n```\n\nPlease note that you must add the `let-attrs=\"attrs\"` attribute to your template.\n\nWith that, you can easily of **different templates for different components**!\n\n#### Old custom templates mechanism (depreacted) ####\n**NOTE** the following is depreacted! (versions less than 1.5.0)\n\n\n**DEPREACTED (applies for\u003c1.5.0)**\nFor that, we need to create a new file, let's call it for instance `comp-test-item.ts`:\n```\nimport {AutoCompleteItem, AutoCompleteItemComponent} from 'ionic2-auto-complete';\n\n@AutoCompleteItem({\n  template: `\u003cimg src=\"assets/image/flags/{{data.name}}.png\" class=\"flag\" /\u003e \u003cspan [innerHTML]=\"data.name | boldprefix:keyword\"\u003e\u003c/span\u003e`\n})\nexport class CompTestItem extends AutoCompleteItemComponent{\n\n}\n\n```\n\nAnd we must also add this component to our module:\n\n```\n@NgModule({\n  declarations: [\n    MyApp,\n    AboutPage,\n    ContactPage,\n    HomePage,\n    TabsPage,\n    CompTestItem\n  ],\n  ...\n  ...\n  providers: [\n    StatusBar,\n    SplashScreen,\n    CompleteTestService,\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\n  ]\n\n```\n\nWhat is going on above is very simple.\nIn order to implement a custom Item component, you need to follow these steps:\n\n1. Import all neccessary classes.\n2. Use the `@AutoCompleteItem` decorator, which currently accepts `template` only (`templeteUrl` is currently not supported).\n3. Extend the AutoCompleteItemComponent class with your own class.\n\n**DEPREACTED**\n\n## Events ##\n\n**itemSelected($event)** - fired when item is selected (clicked)  \n**itemsShown($event)** - fired when items are shown  \n**itemsHidden($event)** - fired when items are hidden  \n**ionAutoInput($event)** - fired when user inputs  \n**autoFocus($event)** - fired when the input is focused  \n**autoBlur($event)** - fired when the input is blured  \n\n## Searchbar options ##\n\nIonic2-auto-complete supports the regular Ionic's Searchbar options, which are set to their default values as specified in the [docs](http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/).\n\nYou can override these default values by adding the `[options]` attribute to the `\u003cion-auto-complete\u003e` tag, for instance:\n\n```\n  \u003cion-auto-complete [dataProvider]=\"someProvider\" [options]=\"{ placeholder : 'Lorem Ipsum' }\"\u003e\u003c/ion-auto-complete\u003e\n```\nOptions include, but not limited to:\n1. debounce (default is `250`)\n2. autocomplete (\"on\" and \"off\")\n3. type (\"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", \"url\". Default \"search\".)\n4. placeholder (default \"Search\")\n\n## Component specific options\n\nIn addition to the searchbar options, ion-auto-complete also supports the following option attributes:\n\n* **[template]** (TemplateRef) - custom template reference for your auto complete items (see below)\n* **[showResultsFirst]** (Boolean) - for small lists it might be nicer to show all options on first tap (you might need to modify your service to handle an empty `keyword`)\n* **[alwaysShowList]** (Boolean) - always show the list - defaults to false)\n* **[hideListOnSelection]** (Boolean) - if allowing multiple selections, it might be nice not to dismiss the list after each selection - defaults to true)\n\nWill set the Searchbar's placeholder to *Lorem Ipsum*\n\n## Accessing Searchbar component ##\n\nBy using the `@ViewChild()` decorator, and the built-in `getValue()` method we can easily access the actual value in the searchbar component.\nJust define a new property within the desired page, for instance (the chosen names are arbitrary):\n\n```\n  @ViewChild('searchbar')\n  searchbar: AutoCompleteComponent;\n```\n\nAnd then, in the component tag we need to add `#searchbar`:\n\n```\n\u003cion-auto-complete [dataProvider]=\"provider\" #searchbar\u003e\u003c/ion-auto-complete\u003e\n```\n\nAvailable methods:\n\n1. getValue(): `this.searchbar.getValue()` - get the string value of the selected item\n2. getSelection(): `this.searchbar.getSelection()` - get the selected object\n3. setFocus(): `this.searchbar.setFocus()` - focus on searchbar\n\n## ngModel (since 1.5.3) ##\n\nMany thanks to [bushybuffalo](https://github.com/bushybuffalo) for contributing this cool feature.\nYou can now bind the component with an ngModel.\nPlease note that if you use an object as your model, the component will try to achieve the initial keyword value using the labelAttribute.\nFor plain string models, it will just use the value itself.\n\n## Contributing ##\n\nTo contribute, clone the repo. Then, run `npm install` to get the packages needed for the library to work. Running `gulp` will run a series of tasks that builds the files in `/src` into `/dist`. Replace the `/dist` into whatever Ionic application's `node_modules` where you're testing your changes to continously improve the library.\n","funding_links":[],"categories":["UI","Components","Complete projects"],"sub_categories":["Form / Input"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadoshms%2Fionic2-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkadoshms%2Fionic2-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkadoshms%2Fionic2-autocomplete/lists"}