V2 Autocomplete with Searchbar expandable

Questions
1

I’ve managed to create a autocomplete search with the default Searchbar which is also used in the autocomplete example. Is it possible to use the Searchbar Exandable component with autocomplete? I created serveral tests, but did not succeed.

2

I am also trying to get the autocomplete working with an expandable searchbar. Did you ever get it working? I can’t get it to work.
I think it might need some custom render function or something.

Please could anyone help with this? Vladimir is bound to know.

3

@timmtim did you ever figure this out?

4

No, unfortunately not.

5

Issue is because search bar expandable has overflow:hidden, so it works but not visible. You can try to set overflow:visible on searchbar when it is in opened/enabled state

6

Hi Vladimir. Yes this is what I am trying to do now…
Problem is I’m trying to hook into the searchbarEnable event to add a class to searchbar that sets overflow: visible …
But this event isn’t triggered on the ios theme, only md. Any ideas?

7

Adding this CSS rule kind of does it for iOS but it’s a bit of a hack result because it shows before the transition is finished.

.searchbar-expandable.searchbar-enabled {
  overflow: visible;
}

But this has no effect of the material design theme. Is there some other style preventing overflow on google?

8

Any updates on what might be stopping the dropdown from working on the material design theme?

Also, any ideas for how to better implement the overflow: visible for the enable state? the above CSS rule make the UI feel buggy on iOS.

9

Another problem I’m having with this is hiding the searchbar when an autocomplete option is selected. I do the following in the autocomplete.create() call :

on: {
  change: function (value) {
    self.map.panTo({lat: parseFloat(value[0].lat), lng: parseFloat(value[0].lng)})
    self.searchbar. disable();
},

This works but it then stops the searchbar from ever being opened again. Is this a bug or am I handling things wrong?

10

So with regards to android not working with autocomplete and searchbar expandable, I have narrowed this down to an Android bug (possibly in the js) rather than just the material design css issue. When you run the following code on an android device regardless of what theme your running, the result is an open and a close event are both fired.

var autocompleteSearchbar = app.autocomplete.create({
  ...
  on: {
    open: function() {
      console.log('autocomplete open');
    },
    close: function() {
      console.log('autocomplete close');
    }
  }
});

So it seems this problem is multifaceted… :persevere:

11

This how it works, checked in Kitchen Sink, just stick to enable/disable Searchbar events:

self.searchbar = app.searchbar.create({
  el: '#searchbar-autocomplete',
  customSearch: true,
  on: {
    search: function (sb, query) {
      console.log(query);
    },
    enable() {
      setTimeout(() => {
        if (app.theme === 'ios') {
          $('#searchbar-autocomplete').css('overflow', 'visible');
        } else {
          $('#searchbar-autocomplete').parents('.navbar-inner').css('overflow', 'visible');
        }
      }, 400);
    },
    disable() {
      if (app.theme === 'ios') {
        $('#searchbar-autocomplete').css('overflow', '');
      } else {
        $('#searchbar-autocomplete').parents('.navbar-inner').css('overflow', '');
      }
    },
  }
})
12

Thank you!
It now looks a lot better on iOS… but the autocomplete dropdown just doesn’t show up on android, even if I switch to running iOS theme on an android device. Any ideas?

I used your code with slight alteration…

self.searchbar = app.searchbar.create({
  el: '#searchbar-autocomplete',
  customSearch: true,
  on: {
    enable: function(searchbar) {
      setTimeout(() => {
        if (app.theme === 'ios') {
          searchbar.$el.css('overflow', 'visible');
        } else {
          searchbar.$el.parents('.navbar-inner').css('overflow', 'visible');
        }
      }, 400);
    },
    disable: function(searchbar) {
      if (app.theme === 'ios') {
        searchbar.$el.css('overflow', '');
      } else {
        searchbar.$el.parents('.navbar-inner').css('overflow', '');
      }
    },
  }
});
13

What is the Android version? Does usual drop down work?

14

Android 6.0.
Yes, if I run the autocomplete example you made with the searchbar in the subnav, then it works fine. But I’d really like it to work in the expandable form.
It’s weird that the dropdown doesn’t work when the theme is set to iOS but running on Android.

15

Any ideas why this searchbar / autocomplete is not woking on android?

16

I have been trying to figure out why the searchbar expandable won’t work with the autocomplete on android.

I have found that I have to type something, then clear it and then if I type something again it will open up the autocomplete dropdown. Can you think of any reason why this would be the case?

I made a screencast video to show what is happening…

I also tried to get a jsfiddle working to explain it but I’m struggling to get any of it running on there.
https://jsfiddle.net/juliusbangert/6ucoyeet/33/

17

Hard to say, will try to get Android device anytime soon to check. At the moment i can recommend you to add no-fastclick class to searchbar’s input <input class="no-fastclick">

18

Hi! I have the same issue in Searchbar Autocomplete with F7-V3.

Exist any workaround?

19

Hi @nolimits4web,

I am having the exactly same issue mentioned by @juliusbangert in his last comment. And I am using the F7 v4.3.1 I thought there would be a fix for this in this version but I still face issue in this version.

I tried your suggested way of using no-fastclick but that is no help for me.

Please do suggest if there is any work around for this.

20

Hi @nolimits4web I’m having this issue too. any update on this issue?

Thank you,