How to enable customSearch v4

It not clear to me after looking at the docs how you activate customSearch (plain web / js) and then catch the events to do an external search.

  <div class="searchbar searchbar-inline" style="width:200px">
    <div class="searchbar-input-wrap">
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
    </div>
  </div> 

I tried adding the following to my mounted event on this view but I get a “searchbar is not a function” error. Its possible that the example is from v3? I was not able to find a doc or forum reference for v4 usage.

        var searchBar = app.searchbar('.searchbar', {
            customSearch: true,
            onSearch: function(s) {
                console.log('Searching', s);
            },
            onClear: function(s) {
                console.log('Clearing', s);
            }
        });
searchbar = app.searchbar.create({
...
 
})
1 Like

Where do you see such syntax? Do you refer to v1 docs? You shouldn’t :slight_smile:

var searchBar = app.searchbar.create('.searchbar', {
    customSearch: true,
    on: {
        search: function(s) {
            console.log('Searching', s);
        },
        clear: function(s) {
            console.log('Clearing', s);
        }
    }
});

It was from a forum post from 2018 so I assumed it was referring to v3 at least.

So I place the searchbar in my HTML as usual and then use the .create in the pages mounted event to define the responses to search and clear?

I attempted adding the code to the mounted event and that didn’t work. I also attempted to just add it to my main app.js after creating the views and that didn’t work either.

Yes, better to page:init event.

Do you have live example or JS fiddle? Also noticed init example above is wrong, it must be

var searchBar = app.searchbar.create({
    el: '.searchbar',
    customSearch: true,
    on: {
        search: function(s) {
            console.log('Searching', s);
        },
        clear: function(s) {
            console.log('Clearing', s);
        }
    }
});

Always check docs for correct syntax. Don’t rely on old forum posts

That works!

It wasn’t clear to me from the docs how to compose the create with customSearch but now that I see your example the docs make a LOT more sense. Maybe add the above example to the searchbar page for future travelers.

The ‘search’ event gets triggered with every character added to the search term. In my case I only want to search once a term is completely entered rather than progressively. I don’t suppose there is a setting to trigger the search function only after the user hits return (or Done on mobile)?

What you can do is to make searchbar as FORM tag and add @submit handler to track the done button:

<form class="searchbar" ... @submit="onSubmit">...

But still it is not the best UI. It is still better to do it while use typing but you can use debouncing technic, and do the search itself within some setTimeout, e.g. 500ms

I have this working with @submit and calling an onSubmit method I defined. How do I get ahold of the event coming in so I can call e.preventDefault? Also, what is the proper way to look up the element values. Usually with the event I would use event.target.elements.search.value to lookup the search term.

(side question) is the @click and @submit features part of framework7. I am not familiar with them as part of javascript and I have not been able to find f7 documentation on them. I used @click earlier on my scrollable tabs. Just curious.

event will be passed as event handler argument:

<form @submit="onSubmit">..
{
  methods: {
    onSubmit(e) {
      e.preventDefault();
      const searchValue = e.target.querySelector('input').value;
    }
  }

These features are part of Router component https://framework7.io/docs/router-component.html#dom-events-handling

1 Like

This worked, thanks!

I’m still getting a stray error though around key input. Do I have to turn off some other default processing in F7 for searchbar?

onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined
    at setFieldValue (onloadwff.js:71)
    at HTMLFormElement.formKeydownListener (onloadwff.js:71)
setFieldValue @ onloadwff.js:71
formKeydownListener @ onloadwff.js:71

<form class="searchbar searchbar-inline" style="width:200px" id="searchbar-offers" @submit="onSubmit">

  onSubmit(e) {
    e.preventDefault();
    const tag = '#' + e.target.elements[0].value.toLowerCase();
    this.getItems(tag);
  },

Its almost like the e.preventDefault is not effective.


On the page that describes event handling it does not list the events that are covered with the @ pattern. The example shows @click which is good. The onsubmit ends up being @submit rather than @onsubmit. Is there a list in the docs of the events covered and which are shortened or named differently?

It also would be helpful to specify that the when you use @submit=“onSubmit” that the event automatically is passed in because in straight javascript you have to say onsubmit=“onSubmit(event)”

bumping this up to get a fresh look - still haven’t figured out why the error when e.preventDefault should stop all further processing of the event

The error you are referencing not related to F7, maybe some of your browser plugins?

Note that additional @ attribute in component template. It is a shorthand method to assign event listener to the specified element. Specified event handler will be searched in component methods .

@click is same as addEventListener('click', ...) There is no point to list all possible DOM events here :wink:

1 Like

Indeed you are correct, its a LastPass bug in Chrome with material UI that they have not fixed yet.

re: @submit … of course, onsubmit is in HTML but the addEventListener uses submit!

Many thanks