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.

Cheers,

Guy

21,986 total views, 5 views today

Tags: ,

Share Post :

10 Comments

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

    Do you have an example working? Thanks!

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

      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.

      Regards,

      Guy

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

    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:
    ng-model=”listData”
    model-to-item-method=”autocompleterViewCntrl.addContact(modelValue)”

    ..and calls this:

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

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

      Hi James,

      could you maybe create an issue at Github here: https://github.com/guylabs/ion-autocomplete/issues 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,

      Guy

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

    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 

      Hi Naresh,

      could you please create an issue here in Github (https://github.com/guylabs/ion-autocomplete/issues) 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,

      Guy

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

        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 

          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,

          Guy

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

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

    thanks

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.

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