[SOLVED] Searchbar event searchbarSearch does not trigger (Svelte)

Other events are running. Triggering does not work when data is input from the keyboard. What is the reason? ( “framework7-svelte”: “^5.7.7”)

nothing appears on the console


function searchKeyword(searchbar, query, previousQuery){
    console.log(searchbar, query, previousQuery);

Works for me, here is the full page code (from Kitchen Sink):

  <Navbar backLink="Back" title="Searchbar">
    <Subnavbar inner={false}>
  <List class="searchbar-not-found">
    <ListItem title="Nothing found"></ListItem>
  <List class="search-list searchbar-found">
    <ListItem title="Acura"></ListItem>
    <ListItem title="Audi"></ListItem>
    <ListItem title="BMW"></ListItem>
    <ListItem title="Cadillac "></ListItem>
    <ListItem title="Chevrolet "></ListItem>
    <ListItem title="Chrysler "></ListItem>
    <ListItem title="Dodge "></ListItem>
    <ListItem title="Ferrari "></ListItem>
    <ListItem title="Ford "></ListItem>
    <ListItem title="GMC "></ListItem>
    <ListItem title="Honda"></ListItem>
    <ListItem title="Hummer"></ListItem>
    <ListItem title="Hyundai"></ListItem>
    <ListItem title="Infiniti "></ListItem>
    <ListItem title="Isuzu "></ListItem>
    <ListItem title="Jaguar "></ListItem>
    <ListItem title="Jeep "></ListItem>
    <ListItem title="Kia"></ListItem>
    <ListItem title="Lamborghini "></ListItem>
    <ListItem title="Land Rover"></ListItem>
    <ListItem title="Lexus "></ListItem>
    <ListItem title="Lincoln "></ListItem>
    <ListItem title="Lotus "></ListItem>
    <ListItem title="Mazda"></ListItem>
    <ListItem title="Mercedes-Benz"></ListItem>
    <ListItem title="Mercury "></ListItem>
    <ListItem title="Mitsubishi"></ListItem>
    <ListItem title="Nissan "></ListItem>
    <ListItem title="Oldsmobile "></ListItem>
    <ListItem title="Peugeot "></ListItem>
    <ListItem title="Pontiac "></ListItem>
    <ListItem title="Porsche"></ListItem>
    <ListItem title="Regal"></ListItem>
    <ListItem title="Saab "></ListItem>
    <ListItem title="Saturn "></ListItem>
    <ListItem title="Subaru "></ListItem>
    <ListItem title="Suzuki "></ListItem>
    <ListItem title="Toyota"></ListItem>
    <ListItem title="Volkswagen"></ListItem>
    <ListItem title="Volvo"></ListItem>
  import { theme, Navbar, Page, Searchbar, Subnavbar, List, ListItem } from 'framework7-svelte';

  function searchKeyword(searchbar, query, previousQuery){
    console.log(searchbar, query, previousQuery);

Sorry for the delayed reply I found something. I don’t know if this is a problem. I will explain with the example.

not work :


work :


What I am trying to do is search api and show the result. I am not searching any list. So searchContainer = “. Search-list” I don’t have it.

You need specify customSearch={true} prop in this case

1 Like

Oh my god it’s very simple. I used this with Framework7 core, but I missed it for svelte. Thank you vladamir