Recomendation for a Typeahead widget

ionic-v1
1

First : congratulation for this awesome project !

Which typeahead widget would work well within iconic ?

I used twitter’s typeahead.js in a few web app,
and it looks like it would work well in ionic, but I’m wondering if
there are better alternatives, the article below explains an interesting
approach for search suggestions in mobile apps :

2

Hey @maxl.

You could use any kind of thing you want inside of Ionic. We don’t have any dropdown component like in the typeahead example, but they are easy to make with just an absolutely positioned box.

Another way would be to show a modal when the user wants to search, with a list view below that will auto populate with results using the autocomplete method as the user types. Take a look at the Amazon app search for an example of how this works.

Without knowing exactly what you are going for, it’d be hard to come up with a single solution, but it’s definitely possible!

3

My use case is pretty standard :

  1. user types an address
  2. query gets sent to google place API (https://developers.google.com/places/documentation/)
  3. suggestions pop up in a drop down list
  4. the user can sellect a suggestion and the text field gets populated with the full text (and angular $scope.someModel
    gets assigned the “object” selected by the user)

I tried twitter’s typeahead and it’s popup remains hidden by the by ionic’s
.item {overflow: hidden} CSS setting.
overriding it to “visible” solves the issue, but the look & feel seems strange.
It seems like it will need other customization to make them play well together.

4

I didn’t like the tooltip style typeaheads either so I ended up populating a list with the results. It looks much better on mobile imho.

5

Is Amazon app written with Ionic? Thanks

6

Try using this https://github.com/israelidanny/ion-google-place
It defines a ionic specific directive for google places. I have not tried it but from its Github page, it looks great.

7

Hi,

if you need the ion-google-place directive configurable, such that you can use any service (not just google place), then have a look at my fork: https://github.com/guylabs/ion-autocomplete

Regards,

Guy

2 Likes
8

I am having issues getting ion-autocomplete working with ionic 1.3.13. Has anyone had any luck with this. Unfortunately I can’t provide much detail as I am not getting an error on serve, emulate or run. Any thoughts on how best to debug this?

9

Hi Kevin,

I just merged your pull request to the ion-google-place project to the ion-autocomplete project. So this should now also work as the ion-google-place directive.

If it is still not working, can you create an issue in GitHub instead of a forum post here?

Thanks and regards,

Guy