jquery - 我需要在 Framework7 中实现自定义搜索

Question

我有 2 组数组，第 1 组是整个数组组，第 2 组是前 10 个数组（第 2 组是 UI 中显示的）。我已经实现了列表视图的搜索。

但我需要从整个数组列表中搜索。

<form class="searchbar searchbar-init" data-search-list=".list-block-search" data-search-in=".item-title" data-found=".searchbar-found" data-not-found=".searchbar-not-found">
                    <div class="searchbar-input">
                       <input type="search" placeholder="Search">
                       <a href="#" class="searchbar-clear"></a>
                    </div>
                    <a href="#" class="searchbar-cancel">Cancel</a>
                 </form>

Answer 1

您需要使用customSearch设置为 的选项来初始化搜索栏true。请参阅：http: //framework7.io/docs/searchbar.html

这是自定义搜索的入门示例：

var searchBar = myApp.searchbar('.searchbar', {
    customSearch: true,
    onSearch: function(s) {
        console.log('Searching', s);
    },
    onClear: function(s) {
        console.log('Clearing', s);
    }
});

Answer 2

这就是我能够使用 customSearch 和使用 ajax Call 使其工作的方式

我正在使用 Framework7 v3.1.1

var searchbar = app.searchbar.create({
  el: '.searchbar',
  customSearch: true
});

searchbar.on('search', function()
{
  $.ajax({
    url: 'http//:url.com?search='+searchbar.query,
    type: "GET"
  }).fail(function() {}).done(function(data)
  {
    //this is to remove the overlay after the search is done
    $('.searchbar-backdrop').removeClass('searchbar-backdrop-in');
  });
});