{"id":14985805,"url":"https://github.com/guylabs/ion-autocomplete","last_synced_at":"2025-10-22T16:54:05.293Z","repository":{"id":26217432,"uuid":"29663916","full_name":"guylabs/ion-autocomplete","owner":"guylabs","description":"A configurable Ionic directive for an autocomplete dropdown","archived":false,"fork":true,"pushed_at":"2018-11-15T19:20:26.000Z","size":2622,"stargazers_count":266,"open_issues_count":19,"forks_count":89,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-28T06:47:52.807Z","etag":null,"topics":["autocomplete","dropdown","ionic","search"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"etodanik/ion-google-place","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guylabs.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-01-22T06:11:37.000Z","updated_at":"2023-08-21T07:30:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/guylabs/ion-autocomplete","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guylabs%2Fion-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guylabs%2Fion-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guylabs%2Fion-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guylabs%2Fion-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guylabs","download_url":"https://codeload.github.com/guylabs/ion-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877064,"owners_count":16554821,"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":["autocomplete","dropdown","ionic","search"],"created_at":"2024-09-24T14:11:42.685Z","updated_at":"2025-10-05T22:30:44.180Z","avatar_url":"https://github.com/guylabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ion-autocomplete\n================\n[![Build Status](https://travis-ci.org/guylabs/ion-autocomplete.svg?branch=master)](https://travis-ci.org/guylabs/ion-autocomplete)\n[![Coverage Status](https://img.shields.io/coveralls/guylabs/ion-autocomplete.svg)](https://coveralls.io/r/guylabs/ion-autocomplete)\n[![Bower version](https://badge.fury.io/bo/ion-autocomplete.svg)](http://badge.fury.io/bo/ion-autocomplete)\n[![npm version](https://badge.fury.io/js/ion-autocomplete.svg)](http://badge.fury.io/js/ion-autocomplete)\n\n\u003e Configurable Ionic directive for an autocomplete dropdown.\n\n:warning: Please follow the [Guidelines to report an issue](#guidelines-to-report-an-issue)\n\n#Table of contents\n\n- [Demo](#demo)\n- [Introduction](#introduction)\n- [Features](#features)\n- [Installation](#installation)\n- [Ionic compatibility](#ionic-compatibility)\n- [Usage](#usage)\n    - [Configurable options](#configurable-options)\n        - [The `items-method`](#the-items-method)\n        - [The `items-method-value-key`](#the-items-method-value-key)\n        - [The `item-value-key`](#the-item-value-key)\n        - [The `item-view-value-key`](#the-item-view-value-key)\n        - [The `max-selected-items`](#the-max-selected-items)\n        - [The `items-clicked-method`](#the-items-clicked-method)\n        - [The `items-removed-method`](#the-items-removed-method)\n        - [External model](#external-model)\n        - [The `model-to-item-method`](#the-model-to-item-method)\n        - [The `cancel-button-clicked-method` (same as done button)](#the-cancel-button-clicked-method-same-as-done-button)\n        - [ComponentId](#component-id)\n        - [Placeholder](#placeholder)\n        - [Cancel button label](#cancel-button-label)\n        - [Select items label](#select-items-label)\n        - [Selected items label](#selected-items-label)\n        - [Template url](#template-url)\n        - [Template data](#template-data)\n        - [Loading icon](#loading-icon)\n        - [Manage externally](#manage-externally)\n        - [Selected items](#selected-items)\n        - [Clear on select](#clear-on-select)\n        - [Open and close CSS class ](#open-and-close-css-class)\n    - [Using expressions in value keys](#using-expressions-in-value-keys)\n    - [Debouncing](#debouncing)\n    - [Usage inside an Ionic modal](#usage-inside-an-ionic-modal)\n- [Guidelines to report an issue](#guidelines-to-report-an-issue)\n- [Release notes](#release-notes)\n- [Acknowledgements](#acknowledgements)\n- [License](#license)\n\n# Demo\n\nYou can find a live demo on [Codepen](http://codepen.io/guylabs/pen/GJmwMw) or see it in action in the following image:\n\n![Animated demo](https://github.com/guylabs/ion-autocomplete/raw/master/demo.gif)\n\n# Introduction\n\nFor one of my private projects I needed an autocomplete component in Ionic. I searched a lot and found some plain Angular autocompletes, but these had too much other dependencies and mostly didn't look that good within Ionic. Then one day I stumbled upon the [ion-google-place](https://github.com/israelidanny/ion-google-place) project which was exactly what I was looking for, except that it was just working with the Google Places API. So I forked the project and made it configurable such that you can add the service you need. The differences between the ion-google-place project and the ion-autocomplete are listed in the features.\n\n# Features\n\nThe ion-autocomplete component has the following features:\n- Multiple selection support\n- Configurable service which provides the items to list\n- Allow to define the maximum number of selected items\n- Configure what is stored in the model and what is seen in the list\n- Configure the template used to show the autocomplete component\n- Configure a callback when an item is clicked/removed\n- Configure a callback when the cancel/done button is clicked\n- Configure all labels used in the component\n\n# Installation\n\n1. Use bower to install the new module:\n```bash\nbower install ion-autocomplete --save\n```\n2. Import the `ion-autocomplete` javascript and css file into your HTML file:\n```html\n\u003cscript src=\"lib/ion-autocomplete/dist/ion-autocomplete.js\"\u003e\u003c/script\u003e\n\u003clink href=\"lib/ion-autocomplete/dist/ion-autocomplete.css\" rel=\"stylesheet\"\u003e\n```\n3. Add `ion-autocomplete` as a dependency on your Ionic app:\n```javascript\nangular.module('myApp', [\n  'ionic',\n  'ion-autocomplete'\n]);\n```\n\n# Ionic compatibility\n\nThe ion-autocomplete component is running with the following Ionic versions:\n\nion-autocomplete version | Ionic version\n------------------------ | -------------\n0.0.2 - 0.1.2 | 1.0.0-beta.14\n0.2.0 - 0.2.1 | 1.0.0-rc.3\n0.2.2 - 0.2.3 | 1.0.0\n0.3.0 - 0.3.1 | 1.1.0\n0.3.2 - 0.3.3 | 1.1.1\n0.4.0 - latest | 1.3.2\n\n# Usage\n\nTo use the `ion-autocomplete` directive in single select mode you need set the `max-selected-items` attribute and add the following snippet to your template:\n```html\n//usage with the attribute restriction\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" max-selected-items=\"1\" /\u003e\n```\n\nIf you want to use it in multiple select mode you do not need to add anything special, just the following snippet to your template:\n```html\n//usage with the attribute restriction\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" /\u003e\n```\n\nCheck out the next chapter on how to configure the directive.\n\n## Configurable options\n\n### The `items-method`\n\nYou are able to pass in a callback method which gets called when the user changes the value of the search input field. This is\nnormally a call to the back end which retrieves the items for the specified query. Here is a small sample which will\nreturn a static item of the query:\n\nDefine the callback in your scope:\n```javascript\n$scope.callbackMethod = function (query, isInitializing) {\n    return [query];\n}\n```\n\nAnd set the items method on the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" items-method=\"callbackMethod(query)\" /\u003e\n```\n\nYou are also able to return a promise from this callback method. For example:\n```javascript\n$scope.callbackMethod = function (query, isInitializing) {\n    return $http.get(endpoint);\n}\n```\n\nNote that the parameter for the `callbackMethod` needs to be named `query`. Otherwise the callback will not get called properly.\nIf you want to also retrieve the [ComponentId](#component-id) then you need to add a second parameter called `componentId`:\n```javascript\n$scope.callbackMethod = function (query, isInitializing, componentId) {\n    if(componentId == \"component1\") {\n        return $http.get(endpoint1);\n    }\n    return [query];\n}\n```\n\nIf you want to pre populate the items which are shown when the modal is visible before the user enters a query then you can check the `isInitializing` flag of\nthe `items-method` as this is set to true if it is called for the initial items. Here is an example which shows the `test` item as an initial item:\n```javascript\n$scope.callbackMethod = function (query, isInitializing) {\n    if(isInitializing) {\n        // depends on the configuration of the `items-method-value-key` (items) and the `item-value-key` (name) and `item-view-value-key` (name)\n        return { items: [ { name: \"test\" } ] }\n    } else {\n        return $http.get(endpoint);\n    }\n}\n```\n\nIf you want to clear the list each time the user opens the modal then just return an empty array like in the following example:\n```javascript\n$scope.callbackMethod = function (query, isInitializing) {\n    if(isInitializing) {\n        // depends on the configuration of the `items-method-value-key` (items) and the `item-value-key` (name) and `item-view-value-key` (name)\n        return { items: [] }\n    } else {\n        return $http.get(endpoint);\n    }\n}\n```\n\nAnd if you do not want that the searched items list gets modified then just return nothing as in this example:\n```javascript\n$scope.callbackMethod = function (query, isInitializing) {\n    if(!isInitializing) {\n        return $http.get(endpoint);\n    }\n}\n```\n\nA common usage for the `items-method` is to use the [Google Map Geocode API](https://developers.google.com/maps/documentation/geocoding/intro?hl=de#Geocoding) for address suggestions.\n\nTo use Googles API you need to link the required library in your `index.html` file:\n```html\n\u003cscript src=\"https://maps.googleapis.com/maps/api/js?v=3.exp\"\u003e\u003c/script\u003e\n```\n\nIn the `ion-autocomplete` input field you set the `items-method` to the below shown method `getAddressSuggestions` and set the value key to `formatted_address` to display the formatted address:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\"\nitem-view-value-key=\"formatted_address\"\nitems-method=\"getAddressSuggestions(query)\" /\u003e\n```\n\nTo query Googles API you have to create a `Geocoder` instance and use the `queryString` as input and return the result object in a promise.\n```javascript\nvar geocoder = new google.maps.Geocoder();\n\n$scope.getAddressSuggestions(queryString){\n    var defer = $q.defer();\n    geocoder.geocode(\n        {address: queryString},\n        function (results, status) {\n            if (status == google.maps.GeocoderStatus.OK) { defer.resolve(results); }\n            else { defer.reject(results); }\n        }\n    );\n    return defer.promise;\n}\n```\n\n\n### The `items-method-value-key`\n\nYou are able to set the `items-method-value-key` attribute which maps to a value of the returned data of the `items-method`. If for\nexample your callback method returns the following object:\n```json\n{\n    \"items\" : [ {\n        \"name\" : \"item1\"\n    },{\n        \"name\" : \"item2\"\n    },\n        ...\n    ]\n}\n```\nThen when you do not specify the `items-method-value-key` there will be no list displayed when you search for items in\nthe search input field. You need to set the `items-method-value-key` to `items` such that the items are shown. If you right\naway return an array of items then you do not need to set the `items-method-value-key`.\n\n### The `item-value-key`\n\nYou are able to set the `item-value-key` attribute which maps to a value of the returned object from the `items-method`. The value\nis then saved in the defined `ng-model`. Here an example:\n\nThe items method returns the following object:\n```javascript\n[\n    {\n        \"id\": \"1\",\n        \"name\": \"Item 1\",\n        ...\n    }\n    ...\n]\n```\n\nAnd now you set the following `item-value-key`:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" item-value-key=\"id\" /\u003e\n```\n\nNow when the user selects the `Item 1` from the list, then the value of the objects `id` is stored in the `ng-model`. If\nno `item-value-key` is passed into the directive, the whole item object will be stored in the `ng-model`.\n\n### The `item-view-value-key`\n\nYou are able to set the `item-view-value-key` attribute which maps to a value of the returned object from the `items-method`. The\nvalue is then showed in both input fields. Here an example:\n\nThe `items-method` returns the following object:\n```javascript\n[\n    {\n        \"id\": \"1\",\n        \"name\": \"Item 1\",\n        ...\n    }\n    ...\n]\n```\n\nAnd now you set the following `item-view-value-key`:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" item-view-value-key=\"name\" /\u003e\n```\n\nNow when the user selects the `Item 1` from the list, then the value of the objects `name` is showed in both input fields. If\nno `item-view-value-key` is passed into the directive, the whole item object will be showed in both input fields.\n\n### The `max-selected-items`\n\nYou are able to set the `max-selected-items` attribute to any number to set the maximum selectable items inside the component. Here an example:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" max-selected-items=\"3\" /\u003e\n```\n\nThen the user is just able to select three items out of the returned items and also delete them again. The given `ng-model` is an\narray if multiple items are selected.\n\nYou can also set a scope variable instead of a fixed value such that you can dynamically change the `max-selected-items` property according to your\n requirements.\n\n### The `items-clicked-method`\n\nYou are able to pass a function to the `items-clicked-method` attribute to be notified when an item is clicked. The name of the\nparameter of the function must be `callback`. Here is an example:\n\nDefine the callback in your scope:\n```javascript\n$scope.clickedMethod = function (callback) {\n    // print out the selected item\n    console.log(callback.item);\n\n    // print out the component id\n    console.log(callback.componentId);\n\n    // print out the selected items if the multiple select flag is set to true and multiple elements are selected\n    console.log(callback.selectedItems);\n\n    // print out the selected items as an array\n    console.log(callback.selectedItemsArray);\n}\n```\n\nAnd pass in the callback method in the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" items-clicked-method=\"clickedMethod(callback)\" /\u003e\n```\n\nThen you get a callback object with the clicked/selected item and the selected items if you have multiple selected items (see [The `multiple-select`](#the-multiple-select)).\n\n### The `items-removed-method`\n\nYou are able to pass a function to the `items-removed-method` attribute to be notified when an item is removed from a multi-select list. The name of the\nparameter of the function must be `callback`. It is similar to items-clicked-method.  This attribute has no defined behaviour for a single select list.\n\nHere is an example:\n\nDefine the callback in your scope:\n```javascript\n$scope.removedMethod = function (callback) {\n    // print out the removed item\n    console.log(callback.item);\n\n    // print out the component id\n    console.log(callback.componentId);\n\n    // print out the selected items\n    console.log(callback.selectedItems);\n\n    // print out the selected items as an array\n    console.log(callback.selectedItemsArray);\n}\n```\n\nAnd pass in the callback method in the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" items-removed-method=\"removedMethod(callback)\" /\u003e\n```\n\nThen you get a callback object with the removed item and the selected items.\n\n### External model\n\nThe two way binded external model (`external-model` attribute on the component) is used to prepopulate the selected items with the model value. The [`model-to-item-method`](#the-model-to-item-method) is used to get the view item to the model and then the item is selected in the\ncomponent. Be aware that the `external-model` is not updated by the component when an item is selected. It is just used to prepopulate or clear the selected items. If you need to get the current selected items you are able\nto read the value of the `ng-model`. For an example have a look at the [`model-to-item-method`](#the-model-to-item-method) documentation.\n\nIf you need to clear the selected items then you are able to set the `external-model` to an empty array (another value is not clearing the selected items).\n\n### The `model-to-item-method`\n\nThis method is used if you want to prepopulate the model of the `ion-autocomplete` component. The [external model](#external-model) needs\nto have the same data as it would have when you select the items by hand. The component then takes the model values\nand calls the specified `model-to-item-method` to resolve the item from the back end and select it such that it is preselected.\n\nHere a small example:\n\nDefine the `model-to-item-method` and `external-model` in your scope:\n```javascript\n$scope.modelToItemMethod = function (modelValue) {\n\n    // get the full model item from the model value and return it. You need to implement the `getModelItem` method by yourself\n    // as this is just a sample. The method needs to retrieve the whole item (like the `items-method`) from just the model value.\n    var modelItem = getModelItem(modelValue);\n    return modelItem;\n}\n$scope.externalModel = ['test1', 'test2', 'test3'];\n```\n\nAnd set the `model-to-item-method` on the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" external-model=\"externalModel\" model-to-item-method=\"modelToItemMethod(modelValue)\" /\u003e\n```\n\nYou are also able to return a promise from this callback method. For example:\n```javascript\n$scope.modelToItemMethod = function (modelValue) {\n    return $http.get(endpoint + '?q=' + modelValue);\n}\n```\n\nNote that the parameter for the `model-to-item-method` needs to be named `modelValue`. Otherwise the callback will not get called properly.\n\n### The `cancel-button-clicked-method` (same as done button)\n\nYou are able to pass a function to the `cancel-button-clicked-method` attribute to be notified when the cancel/done button is clicked to close the modal. The name of the\nparameter of the function must be `callback`. Here is an example:\n\nDefine the callback in your scope:\n```javascript\n$scope.cancelButtonClickedMethod = function (callback) {\n    // print out the component id\n    console.log(callback.componentId);\n\n    // print out the selected items\n    console.log(callback.selectedItems);\n\n    // print out the selected items as an array\n    console.log(callback.selectedItemsArray);\n}\n```\n\nAnd pass in the callback method in the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" cancel-button-clicked-method=\"cancelButtonClickedMethod(callback)\" /\u003e\n```\n\nThen you get a callback object with the selected items and the component id.\n\n### Component Id\n\nThe component id is an attribute on the `ion-autocomplete` component which sets a given id to the component. This id is then returned in\nthe callback object of the [`items-clicked-method`](#the-items-clicked-method) and as a second parameter of the [`items-method`](#the-items-method).\nHere an example:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" component-id=\"component1\" /\u003e`\n```\n\nYou are able to set this is on each component if you have multiple components built up in a ng-repeat where you do not want to have multiple `items-method`\nfor each component because you want to display other items in each component. You will also get it in the `items-clicked-method` callback object such that you just\nneed to define one callback method and you can distinguish the calls with the `componentId` attribute right inside the method.\n\n### Placeholder\n\nYou are also able to set the placeholder on the input field and on the search input field if you add the `placeholder`\nattribute to the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" placeholder=\"Enter the query to search for ...\" /\u003e`\n```\n\n### Cancel button label\n\nYou are also able to set the cancel button label (defaults to `Cancel`) if you add the `cancel-label` attribute to the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" cancel-label=\"Go back\" /\u003e`\n```\n\n### Select items label\n\nYou are also able to set the select items label (defaults to `Select an item...`) if you add the `select-items-label` attribute to the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" select-items-label=\"Select your items...\" /\u003e`\n```\n\n### Selected items label\n\nYou are also able to set the selected items label (defaults to `Selected items:`) if you add the `selected-items-label` attribute to the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" selected-items-label=\"Selected:\" /\u003e`\n```\n\n### Template url\n\nYou are also able to set an own template for the autocomplete component (defaults to `''`) if you add the `template-url` attribute to the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" template-url=\"templates/template.html\" /\u003e`\n```\n\nThis way you are able to override the default template (the `template` variable [here](https://github.com/guylabs/ion-autocomplete/blob/master/src/ion-autocomplete.js#L68))\nand use your own template. The component will use the default template if the `template-url` is not defined.\n\nYou are able to use all the configurable attributes as expressions in your template. I would advise to use the default template as base template\nand then add your custom additions to it.\n\n\u003e Please also take care when you change how the items are shown or what method is called if an item is clicked,\n\u003e because changing this could make the component unusable.\n\nYou will need to set the proper `randomCssClass` for the outer most div container in your template and you can get the value by using the `{{viewModel.randomCssClass}}` expression\nlike in the following example:\n\n```html\n\u003cdiv class=\"ion-autocomplete-container {{viewModel.randomCssClass}} modal\" style=\"display: none;\"\u003e\n```\n\n### Template data\n\nIf you change the template with the `template-url` and want to pass in additional data then you are able to set\nthe `template-data` attribute on the directive. If you for example have a `templateData.testData` expression in your own\ntemplate like this:\n```html\n...\n\u003cdiv\u003e{{templateData.testData}}\u003c/div\u003e\n...\n```\nThen you need to set the proper object on your Angular scope the following way:\n```javascript\n$scope.templateData = {\n    testData: \"test-data\"\n};\n```\nAnd now you just need to add the `templateData` attribute on the directive:\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" template-data=\"templateData\" /\u003e`\n```\n\nThen the expression in your template gets resolved properly.\n\n### Loading icon\n\nIf you want to display a loading icon when the `items-method` promise gets resolved then you need to set the `loading-icon`\nattribute to a value given by the Ionic spinner: http://ionicframework.com/docs/api/directive/ionSpinner. Then the spinner should\nbe shown at the right side of the search input field.\n\n### Manage externally\n\nTo manage the `ion-autocomplete` component externally means that you need to handle when the search modal is shown. To enable this functionality\nyou need to set the `manage-externally` attribute to `true` and then you can call the `showModal()` method on the controller. Here an example:\n\n```javascript\n// create the externally managed component and a button which has a click handler to a scope method\n\u003cinput ion-autocomplete type=\"text\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" manage-externally=\"true\" /\u003e\n\u003cbutton class=\"button\" ng-click=\"clickButton()\"\u003eOpen modal\u003c/button\u003e\n\n// inside your controller you can define the 'clickButton()' method the following way\nthis.clickButton = function () {\n    var ionAutocompleteElement = document.getElementsByClassName(\"ion-autocomplete\");\n    angular.element(ionAutocompleteElement).controller('ionAutocomplete').fetchSearchQuery(\"\", true);\n    angular.element(ionAutocompleteElement).controller('ionAutocomplete').showModal();\n}\n```\n\nThen you will need to click on the button to open the search modal. This functionality is useful if the user wants to edit the selected item inside the\ninput field after she/he selected the item/s.\n\n### Selected items\n\nIf you want to clear the selected items programmatically, then you are able to set the `selected-items` attribute with a two way binded model value which then gets updated\nwhen the items get selected. If you want to clear them just set the given model value to an empty array.\n\nPlease *do not* use it for pre populating the selected items. For this use the standard `ng-model` value and [the `model-to-item-method`](#the-model-to-item-method).\n\n### Clear on select\n\nThis option is to clear the search input when an item is selected. You need to set it to `true` as in the following example to enable this functionality:\n\n```javascript\n\u003cinput ion-autocomplete type=\"text\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" clear-on-select=\"true\" /\u003e\n```\n\n### Open and close CSS class\n\nBy default two CSS classes are used to display and hide the modal, namely the ion-autocomplete-open and the ion-autocomplete-close CSS class. These are used to show and hide the modal. When you need to override these classes, you can define the following two properties with your CSS class.\n\n```javascript\n\u003cinput ion-autocomplete type=\"text\" class=\"ion-autocomplete\" open-class=\"my-open-class\" close-class=\"my-close-class\" /\u003e\n```\n\n## Using expressions in value keys\n\nAll value keys are parsed with the Angular `$parse` service such that you are able to use expressions like in the following\nexample:\n\n```javascript\n[\n    {\n        \"id\": \"1\",\n        \"name\": \"Item 1\",\n        \"child\": {\n            \"name\": \"Child Item 1\",\n        }\n        ...\n    }\n    ...\n]\n```\n\nThis would be the JSON model returned by the `items-method` and in the next snippet we define that we want to show the\nname attribute of the child object:\n\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" item-view-value-key=\"child.name\" /\u003e\n```\n\n## Debouncing\n\nIf you want to debounce the search input field request, then you are able to set the `ng-model-options` attribute on the input field where you define the `ion-autocomplete`\ndirective. These options will then be added to the search input field. Be aware that when you add a debounce the update of the model value will also be debounced the\n same amount as the request to the `items-method`. Here a small example:\n\n```html\n\u003cinput ion-autocomplete type=\"text\" readonly=\"readonly\" class=\"ion-autocomplete\" autocomplete=\"off\" ng-model=\"model\" ng-model-options=\"{debounce:1000}\" /\u003e\n```\n\n## Usage inside an Ionic modal\n\nWhen you add the `ion-autocomplete` component to a separate Ionic modal, then you need to remove the modal when you switch the view. You can achieve this by adding the following scope `$destroy` listener where the separate modal is removed:\n\n```javascript\n$scope.$on('$destroy', function () {\n        $scope.modal.remove();\n    });\n```\n\n# Guidelines to report an issue\n\nPlease follow these rules when you create an issue here in Github:\n\n1. Have a meaningful title of the issue.\n2. Describe exactly how to reproduce the issue and create a Codepen based on the [demo](#demo) Codepen which reproduces the issue.\n3. Show how you configured the directive with all the options.\n4. Write down the Ionic version you use and which version of the directive.\n\nThese steps are needed to be able to analyze the issue properly without asking much questions. It is also useful for others when the issues\nexactly describe what the problem is and in which environment it happened.\n\nFor feature request please add a proper title and describe it as much as possible and also tell about the requirement you have.\n\n# Release notes\n\nCheck them here: [Release notes](https://github.com/guylabs/ion-autocomplete/blob/master/RELEASENOTES.md)\n\n# Acknowledgements\n\nWhen I first searched for an Ionic autocomplete component I just found the project from Danny. So please have a look at\nhis [ion-google-place](https://github.com/israelidanny/ion-google-place) project as this project here is a fork of it.\nAt this point I want to thank him for his nice work.\n\n# License\n\nThis Ionic autocomplete directive is available under the MIT license.\n\n(c) Danny Povolotski\n\n(c) Modifications by Guy Brand\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguylabs%2Fion-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguylabs%2Fion-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguylabs%2Fion-autocomplete/lists"}