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
10 Comments
Do you have an example working? Thanks!
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
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;
}
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-methodas this is used to lookup prefetched model values and is not to populate the model. For that you need to implement theitems-method.Thanks and regards,
Guy
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.
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
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
Hi Naresh,
you can use the
externally-managedflag on theion-autocompletecomponent to achieve this behavior. Please check out the documentation here.Happy christmas and regards,
Guy
how to set ion-autocomplete non-case-sensitive?
thanks
Hi
To make it not case sensitive you need to implement your https://github.com/guylabs/ion-autocomplete#the-items-method properly, as there you get the query and you can return the values as you wish. If that does not work please create an issue at Github: https://github.com/guylabs/ion-autocomplete/issues and follow the https://github.com/guylabs/ion-autocomplete#guidelines-to-report-an-issue to report an issue.
Hope that helps.
Thanks and regards
Guy