guy labs guy labs

Ionic autocomplete project

Today I want to present you my second open source project: Ionic autocomplete. This Angular directive makes it possible to show an autocomplete component based on the Ionic framework. It uses the given UI elements from Ionic to build up the search input and the list of found items.

Please read more in the projects section or have a look at the source code on GitHub. If you have any questions feel free to add a comment to the projects page or create an issue on GitHub.




Tags: ,

Share Post :


  • Hernan
    April 14, 2015 4:20 PM at 4:20 PM  - Reply

    Do you have an example working? Thanks!

    • guy
      April 14, 2015 9:35 PM at 9:35 PM  - Reply

      Hi Hernan,

      you can have a look at a demo here or you can clone the GIT repository and have a look at the ion-autocomplete.multiple-select.e2e.html or the ion-autocomplete.single-select.e2e.html end to end test template which will show a multiple select or a single select ion-autocomplete component.

      I hope that this shows you the features. Thanks for asking!

      If you have any other questions please do not hesitate to ask or create an issue on GitHub.



  • James MacFarlane
    August 25, 2015 5:06 PM at 5:06 PM  - Reply

    How to I add more values to the selected list post-render? I see the new value going into the model, but it never renders.

    Directive includes:

    ..and calls this:

    AutocompleterView._addContact = function(modelValue) {
    $log.log(“Autocompleter:add contact”, modelValue, _vm.listData);
    return modelValue;

    • guy
      August 25, 2015 5:38 PM at 5:38 PM  - Reply

      Hi James,

      could you maybe create an issue at Github here: and then I can have a look at it, as it is easier to track there. I think you misuse the model-to-item-method as this is used to lookup prefetched model values and is not to populate the model. For that you need to implement the items-method.

      Thanks and regards,


  • Naresh
    December 11, 2015 11:31 AM at 11:31 AM  - Reply

    Hi Guy,

    I am having an issue with the autocomplete on ionic iOS. It shows the predicitive text tabs and the only way I can remove it is by adding input type “email” within your code. Is there another way I can do this without messing with your code?

    I have tired the cordova keyboard plugins and various tips from stack overflow, but to no avail.

    • guy
      December 12, 2015 1:05 PM at 1:05 PM  - Reply

      Hi Naresh,

      could you please create an issue here in Github ( with a proper description and steps how to reproduce. Please also add which input field you need to change and what Ionic version you have etc.

      Thanks and regards,


      • Naresh
        December 20, 2015 2:35 PM at 2:35 PM  - Reply

        Hi Guy,

        I fixed it, but was wondering how I can call the autocomplete without having to click on the input field to open it

        • guy
          December 23, 2015 12:04 PM at 12:04 PM  - Reply

          Hi Naresh,

          you can use the externally-managed flag on the ion-autocomplete component to achieve this behavior. Please check out the documentation here.

          Happy christmas and regards,


  • Agung
    March 8, 2017 6:10 AM at 6:10 AM  - Reply

    how to set ion-autocomplete non-case-sensitive?


Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.