Framework7 Starter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.6/css/framework7.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.6/js/framework7.min.js"></script>
<div id="app">
    <div class="view view-main ios-edges">
      <div class="page page-with-subnavbar" data-name="clinicas">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link icon-only panel-open" data-panel="left">
          <i class="icon f7-icons ios-only">menu</i>
          <i class="icon material-icons md-only">menu</i>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Clínicas</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-clinicas">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
     
     <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable searchbar-init"
      data-search-container=".virtual-listClinicas" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar clínicas"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>

      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#" id="button-turno" class="button">
              <i class="icon f7-icons ios-only">person</i>
              <i...

CSS

.searchbar .searchbar-input-wrap {
  overflow: hidden;
}

JavaScript

var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [{
    path: '/about/',
  }]
});

var viewMain = app.views.create('.view-main');

cargarListaClinicas();

function cargarListaClinicas() {

  var urlClinicas = "https://jsonplaceholder.typicode.com/users";

  app.preloader.show();
  app.request.get(urlClinicas, function (data) {
    var dataClinicas = JSON.parse(data);

    var virtualListClinicas = app.virtualList.create({
      // List Element
      el: '.virtual-listClinicas',
      // Pass array with items
      items: dataClinicas,
      // Custom search function for searchbar
      searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
          if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
        }
        return found; //return array with mathced indexes
      },
      // List item Template7 template
      itemTemplate:
        '<li data-id="{{id}}">' +
          '<a href="#" class="item-link item-content">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{name}}</div>' +
              '</div>' +
              '<div class="item-subtitle">{{email}}</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      // Item height
      height: app.theme === 'ios' ? 63 : 73,
    });
    setTimeout(function () {
      app.preloader.hide();
    }, 3000);
  });
}