Autocomplete for textboxes

ionic-v1
1

Ionic is an awesome framework compared to other framework’s i have used Jquery Mobile, Bootstrap and all, I feel it more natural for creating hybrid apps. But I find it really hard to find any help online as it is relatively new except this forum. I am not a designer (so not that good in css).
I tried hard to create an autocomplete option (I want to get the data from the server as json) for the textboxes (I used placeholder labels for the input form). I tried with typeahead.js and Angucomplete. But couldn’t make it out. For typeahead it was always coming behind the existing inputs. Can anybody help me on this with a working sample code ?

2

hello,

3

What do you mean “it was always coming behind the existing inputs”?

Can you give us a CodePen sample to start with? At the very least mockup your view and search box and put together some sample data to autocomplete on.

4

I actually put together a sample for you. Autocomplete has been asked a few times:

Just start typing an airline name in the field. It’s a pretty long list of sample airline names. Maybe start with an “a”.

You also should probably add a debounce on your real sample to keep from firing $http every single keystroke.

FYI : See this as well : Ionic-search directive

5

Hi,

maybe have a look at my fork of a google place autocomplete: https://github.com/guylabs/ion-autocomplete. This is a configurable autocomplete without any additional libraries. It’s just implemented with ionic UI elements.

Regards,

Guy

2 Likes
6

Hey guylabs,
Thanks for your work on autocomplete in ionic framework. I am currently trying to implement this feature in my ionic framework app but not able to do so. Could you please give a snippet as to how do i use promise returned by callback for populating “items-method-value-key” in my dropdown?

Edit: Was able to do so, is there any way where we can call some function on click of any item in the list?

BR,
Gaurav

7

Hi Gaurav,

sorry for my late response. Good that it worked with the items-method-value-key value. About your second question:

Currently the click function is hard wired in the directive (link to code). But I can surely add this in a later version. Could you please create a feature request here: https://github.com/guylabs/ion-autocomplete/issues.

Then I can plan this and implement it accordingly.

Is that ok for you?

Thanks and regards,

Guy

8

Hi Gaurav,

I just implemented the needed functionality: https://github.com/guylabs/ion-autocomplete#the-items-clicked-method can you check (with the master) if that is what you need? Then I can release a new version as I also added multiple selection support.

Thanks and regards,

Guy

9

I am also trying to implement the ion-autocomplete and no suceed:
HTML:

<ion-autocomplete ng-model="searchTags" items-method="getTags(query)" item-value-key="id" item-view-value-key="name" placeholder="Search tags" cancel-label="Cancel"/></ion-autocomplete>

JS:

$scope.getTags = function (query) {                   
           return [{id: "1", name: query + "1", view: "view: " + query + "1"},
                    {id: "2", name: query + "2", view: "view: " + query + "2"},
                    {id: "3", name: query + "3", view: "view: " + query + "3"}];
            
       }

image
search.png959×174 1.46 KB

10

Hi,

sorry for my late response but I didn’t get any notifications. Which version of ion-autocomplete did you use? Can you maybe reproduce the issue with the following template https://github.com/guylabs/ion-autocomplete/blob/master/test/e2e/ion-autocomplete.single-select.e2e.html and then come back to me again on GitHub https://github.com/guylabs/ion-autocomplete/issues and file an issue?

Thanks and regards,

Guy

11

Please somebody help me with ionic autocomplete.
I have 2 questions :

I have array,it`s look like

 array = [
{name:'some name' , id:'01'},
{name:'some name' , id:'02'},
{name:'some name' , id:'03'}]

how i can use ionic autocomplete to search I’m my array?

  1. This array has more than 3000 items.How fast will be work autocomplete with this large array?
12

I do not understand your autocomplete, all I want to do is search through my list of data, when i click on an item,it should select it

13

For reference: https://github.com/guylabs/ion-autocomplete/issues/53

14

Hi,

can you please have a look at the documentation(https://github.com/guylabs/ion-autocomplete) and at the demo at codepen (https://github.com/guylabs/ion-autocomplete#demo). If you still have an issue please create one on the GitHub repository (https://github.com/guylabs/ion-autocomplete/issues).

Thanks and regards,

Guy

15

Please download control directive from https://github.com/ajayparsana/ionic-autocomplete This will display result below search box and has option for static and async calls on key press

16

Hi Guylabs,

Is there any way to customize the look and feel of the auto complete. As of now search results having more than 1 line are getting cluttered inside the list item.

image

Regards,
Prithvi

17

Hi @Kannugo_Prithvi

you are able to change the template and adapt the styling by yourself. If this still doesn’t work out, could you please create an issue on Github such that I can track it?

Thanks and regards,

Guy

19

Hi Ajay, is it possible to customize the look and feel of the popover?

20

If you read the following posts after the one you’re responding to, you’ll see the author of the plugin answers this very question. Their github repo has a detailed guide on how to use the plugin, including customizing: https://github.com/guylabs/ion-autocomplete

21

Hello,
Thank You for the codepen link, but the click does not work when you click form the autocomplete results, you have to type all yourself form the results.
Can you please fix that too?
Will be great.
Thanks