[SOLVED] F7 V2 Virtual-List items Search limit?

Questions
1

Hello community!

I’m having a little issue searching items from a Virtual-List. I’m loading a 4200 plus items on the list and it’s like it’s only searching on the first 40 items and doesn’t care about the rest. Why does that happen?. And when scrolling looks good and all. Also I notice when I inspect the elements with the browser while I scroll down the list items are being “created” or “loaded” on the html. What I want to do is that the searchbar search on all the items on the virtual-list. I’ll post some code. Thanks in advance.

EDIT: Here’s live example https://jsfiddle.net/8ua5tewh/1/
Try searching the name Zweiger, for example and doesn’t work. It only search from 0 to 39.

Here’s the JS function for the Virtual-List

function cargarListaPacientes(idClinica) {

  var urlPacientes = "myjsonurl.com";

  app.preloader.show();

  app.request.get(urlPacientes, function(data) {
    var dataPacientes = JSON.parse(data);

    console.log(dataPacientes);
    
    var virtualListPacientes = app.virtualList.create({
      // List Element
      el: '.virtual-list-pacientes',
      // Pass array with items
      items: dataPacientes.pacientes,
      // Custom search function for searchbar
      searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
          console.log(items[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="{{dni}}" data-nombre-paciente="{{nombre}}">' +
          '<a href="#" class="item-link item-content">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{nombre}}</div>' +
              '</div>' +
              '<div class="item-subtitle">DNI: {{dni}}</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      // Item height
      height: app.theme === 'ios' ? 63 : 73,
    });

    app.preloader.hide();

  });
}

Here’s the HTML code:

<div class="page" data-name="pacientes">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Atrás</span>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Pacientes</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-pacientes">
          <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 searchbar-pacientes"
      data-search-container=".virtual-list-pacientes" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar pacientes"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>

    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>

    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>No se han encontrado resultados.</li>
      </ul>
    </div>

    <!--Virtual List Pacientes-->
    <div class="list virtual-list-pacientes media-list searchbar-found">
    </div>
    <!--Virtual List Pacientes-->
  </div>

</div>
2

It does search over all items in Virtual List. You can check it in Virtual List page in Kitchen Sink

3

Thanks for replying. I did check the Virtual List in Kitchen Sink and works good with the 10k items.
To test if I had something wrong, I used the Virtual List Kitchen Sink page and made the request call there and the same happens. Also I loaded like 7k items directly on the HTML and works good too. The problem comes when I make the request. It’s only me?

4

I uploaded a live example.

5

I was able to make the Virtual List work correctly.

I had the next error on the html

The .virtual-list class is missing here:

<div class="list virtual-list-pacientes media-list searchbar-found">

And on the JS I had the next error: items[i].title should be items[i].nombre because thats the JSON property.

if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);

And that was it I think. Now it search through all the items well. Thanks.

6

Excuse me, I also think that the Virtual List only shows the first 40 data, even though the data has been displayed all but when I try to retrieve data-id it can only be done on the first 40 data only ? Do you have a solution ?