[SOLVED] Searchbar elements not working

Questions
1

Hello,

Can someone let me know why some elements do not work on my searchbar? I used the same code from the docs: http://v2.framework7.io/docs/searchbar.html.

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Search Bar</div>
      <div class="subnavbar">
        <!-- Searchbar with auto init -->
        <form class="searchbar">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search">
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="page-content">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>
    <!-- hide-on-search element -->
    <div class="block searchbar-hide-on-search">
      <p>This block will be hidden on search. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- search target list -->
    <div class="list searchbar-found">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Acura</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Audi</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">BMW</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Volvo</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- Nothing found message -->
    <div class="block searchbar-not-found">
      <div class="block-inner">Nothing found</div>
    </div>
  </div>
</div>


var app = new Framework7();

// create searchbar
var searchbar = app.searchbar.create({
  el: '.searchbar',
  searchContainer: '.list',
  searchIn: '.item-title',
  on: {
    search(sb, query, previousQuery) {
      console.log(query, previousQuery);
    }
  }
});

When I click on the textbox, the backdrop doesn’t appear to dim the page, and those with
the searchbar-hide-on-search class do not get hidden when I type. searchbar-not-found doesn’t show either. I think it’s automatic but is it something that I should do programmatically? I’m using a tabbed interface like Instagram, I’m not sure if I should do anything differently.

Thanks!

2

Hi,
Thats your actual code?
eg:

var app = new Framework7();

Please read how to initialize your app

http://v2.framework7.io/docs/init-app.html

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});
var mainView = app.views.create('.view-main');
3

Hello,

My app has the initialization code. I just copied the HTML part from the docs and gave it a separate page to see how it would work, but for some reason it isn’t.

Here’s my init code, by the way:
var $$ = Dom7;

// Framework7 App main instance
//[INIT]
var app  = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  view: {
    uniqueHistory: true,
  },
  // App routes
  routes: routes,
    touch: {
    materialRipple: false,
  },
  on: {
      init: function () {
        console.log('App initialized.');

//navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 60000, enableHighAccuracy: true });
      },
    }

});

// Init/Create views
var homeView = app.views.create('.view-main', {
  url: '/',
  name: 'home',
  stackPages:true
});

var takepictureView = app.views.create('#view-take-picture', {
  url: '/take-picture/',
  name: 'takepicture'
});

var meView = app.views.create('#view-me', {
  url: '/me/',
  name: 'me'
});

var inboxView = app.views.create('#view-inbox', {
  url: '/inbox/',
  name: 'inbox'
});

Do you have an idea why it wouldn’t work?

4

Okay, I got it. :slight_smile: Apparently, I needed to add searchbar-init and the data- stuff.

<form class="searchbar searchbar-init" data-search-container=".list" data-search-in=".item-title" >

That worked for me.

6

@nolimits4web Hello Vladimir! May you have to update the framework7.io/docs/searchbar.html because the example that is given don’t have this line:

<form class="searchbar searchbar-init" data-search-container=".list" data-search-in=".item-title" >

Instead, have this one: <form class="searchbar">

Im new in js and with this framework and the examples are very importante for newbies lol, thanks!