Clear searchbar input without re-rendering search results on barcode scan

Questions
1

I have been able to check if its a barcode that has been scanned or keyboard typed into my searchbar, but when i clear the searchbar, it re-renders the already search results starting all over again with the items displayed on page init therefore yielding no results.

            var virtualList = app.virtualList.create({

              // List Element
                el: '.virtual-list',

              // Pass array with items
                items: this.items,

              // Custom search function for searchbar
                searchAll: function (query, items) {

              var found = [];

              for (var i = 0; i < this.items.length; i++) {
                if (this.items[i].item.toLowerCase().indexOf(query.toLowerCase()) >= 0 || this.items[i].barcode.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
              }

              !isNaN(query) ? app.searchbar.clear(".page[data-name='catalog'] .searchbar") : '';

              return found; //return array with mathced indexes

            },
2

Okay, well well well, I finally tweaked my way through. As a solution to persons who might come across this, this is the way out:

          var virtualList = app.virtualList.create({

          // List Element
            el: '.virtual-list',

          // Pass array with items
            items: this.items,

          // Custom search function for searchbar
            searchAll: function (query, items) {

          var found = [];

          for (var i = 0; i < this.items.length; i++) {
             if (this.items[i].item.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === ''){
                 found.push(i);
             }
             else if (this.items[i].barcode.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === ''){
                 found.push(i);
                 !isNaN(query) ? $$(".page[data-name='catalog'] .searchbar input").val('') : '';
              }

          !isNaN(query) ? app.searchbar.clear(".page[data-name='catalog'] .searchbar") : '';

          return found; //return array with matched indexes

        },

And then you can utilize the keycode property by evaluating for the index of the last two values and comparing that to 13 since that’s the ANSCII code for keyboard enter key in JS.

      $$(document).on('keyup, ".page[data-name='catalog'] .searchbar", e => {
        e.which == 13 || e.keyCode == 13 ? $$(".page[data-name='catalog'] .searchbar input").val('') : "";
      });
1 Like