How do i add search suggestions using ionic?

how can i implement “typeahead” for input field without ‘ui.bootstrap’.

I think ‘ui.bootstrap’ and ‘ionic’ won’t work together right ?

You could try to add both, it might work. However, what might be better is to do something where you slide up a Modal for a search, then populate a list as the user types a search query.

I don’t have any example code yet, but that could make a nice tutorial.

I am expecting to have a code example/tutorial to have a search/filter at the top of the list repeat view. Any help would be appreciated.

Thank you
Anunay

Does anyone have an example of this? I got the typeahead in angular.ui-bootstrap to work, but I don’t like the tool tip results. I really like what max is suggesting but I can’t figure out how to do it. Any help would be much appreciated.

Thanks!

I think all he was suggesting was have a modal open that you can do type-ahead in.

Here is a very rough example ;

Just open the modal, see the search bar and start typing in it. Then, use whatever logic you like to query the server and put the results in a list underneath.

Hi,

or maybe have a look at this directive which gives you a configurable autocomplete made with Ionic UI elements: https://github.com/guylabs/ion-autocomplete

Regards,

Guy

Hi Guy,

Had a play with your ion-autocomplete. I noticed that you have to use a value returned in the list, what about when you just want suggestions but none suit so you stick with what you you entered?

Hi,

well that is not supported by now, but there is already an issue for that: https://github.com/guylabs/ion-autocomplete/issues/48.

Thanks and regards,

Guy

Hi,

have a look at my codepen, hope this help
link http://codepen.io/rr-y-r/pen/QjXKgB

1 Like

My solution is just add a new dynamic list with ng-repeat on content.
Hide content show list when user typing…
After he chooses from list hide list and show content

1 Like

I have got the same requirement…

I have implemented auto suggestions using filters with ion-items on top of content after header…take a look .

I submitted my code to github too.It will give some idea how to implement that…