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.
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.
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)?
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.
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)”
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