Question

我希望我没有违反任何准则或任何内容，因为这主要是我的搜索设置的展示。底部有几个问题。我保证。

我已经制作了一个Sencha Touch 2 PhoneGap应用程序（现在live in the AppStore适用于iOS，Android即将推出）。该应用程序的基本前提是（有点巨大的）可搜索列表（带有几个额外的过滤器）。因此搜索性能至关重要。

我的搜索控制器的简要说明：在查看示例时，我发现人们使用提交按钮或搜索关键字，因为后者最感兴趣的是我开始的地方。

在我发现的示例中，只激活了keyup侦听器，快速修复：

'searchfield[itemId=searchBox]' : {
       clearicontap : 'onClearSearch',
       keyup: 'onSearchKeyUp',
       submit: 'onSubmit',
       action: 'onSubmit',
       paste: 'onSubmit',
       blur: 'onSubmit'
    }

现在，为什么keyup和提交不同你可能会问？好吧，onSubmit函数只运行搜索功能（稍后会详细介绍）。 onClearSearch只清除商店中设置的过滤器，然后重新添加非基于搜索的过滤器。

onSearchKeyUp函数是有趣的地方。由于列表很大，搜索每个字母都等于性能不佳。搜索字段在搜索时停止（特别是在较旧的设备上），因此当用户继续点击键盘上的字母时，没有任何显示，同时排队javascript和（在某些情况下）导致用户再次点击字母，以便当所有搜索功能实际完成时，输入可能甚至不是用户想要的。

我通过尝试推断用户完成输入的时间来解决这个问题。我通过使用keyup触发定时器来实现这一点，在这种情况下为650 ms，如果在此期间内触发了另一个keyup事件，则取消定时器，如果它运行，则触发搜索功能。该定时器当然可以设置得更高或更低。较低意味着用户键入的速度更快，因为在打字时不会搜索。更高意味着用户必须等待更长时间才能从最后一个keyup事件开始实际搜索（感知为滞后）。

当然，有一个例外，如果keyup事件来自enter键，它会立即搜索。代码：

    onSearchKeyUp: function(searchField,e) {
    if (e.event.keyCode == 13){
       window.clearTimeout(t);
       window.timer_is_on=0;
       searchFunction();
       } else {
       doTimer();
       }
       function timedCount()
       {
       t=setTimeout(function(){timedSearch();},650);
       }
       function timedSearch()
       {
       console.log('b4 search');
       searchFunction();
       window.timer_is_on=0;
       }

       function doTimer()
       {
       if (window.timer_is_on === 0)
       {
       window.timer_is_on=1;
       timedCount();
       } else {
       window.clearTimeout(t);
       window.timer_is_on=0;
       console.log('cleared timeout');
       doTimer();
       }
       }
       }

onSubmit: function(searchField,e) {
   if (window.timer_is_on === 0)
   {
   console.log('timer was not on when done was pressed');
   } else {
   console.log('timer was on when done was pressed');
   window.clearTimeout(t);
   window.timer_is_on=0;
   searchFunction();
   }
   } else {
   searchFunction();
   },

所以对于搜索功能。我想我可能还有一些改进空间。首先，我注意到当我向下滚动列表并进行搜索时，我最终可能会低于实际列表内容，无法向上滚动。所以搜索功能的第一件事就是滚动到顶部。

正如我在帖子开头所提到的，我有一些额外的过滤器。这些是工具栏按钮，基本上设置变量，然后触发搜索功能。在搜索功能中，基于变量完成过滤。我结合了搜索和过滤功能，因为它们都需要清除过滤器并将它们重新添加。

你还会注意到加载掩码和延迟。延迟是严格经验的，结果是加载掩模实际显示需要25毫秒的延迟。

我的搜索功能代码：

    function searchFunction() {
        Ext.Viewport.setMasked({
                               xtype: 'loadmask',
                               message: 'Searching'
                               });
        setTimeout(function() {
        Ext.getCmp('lablist').getScrollable().getScroller().scrollTo(0,0);
        var searchField = Ext.getCmp('searchBox');
        queryString = searchField.getValue();
        console.log('Please search by: ' + queryString);
        var store = Ext.getStore('LabListStore');
        store.clearFilter();
        genderFilterFuncForSearch();
        ageFilterFuncForSearch();
        if(queryString){
            var thisRegEx = new RegExp(queryString, "i");
            store.filterBy(function(record) {
                           if (thisRegEx.test(record.get('Analysis'))||thisRegEx.test(record.get('Groupname'))) {
                           return true;
                           }
                           return false;
                           });
        }},25);
    }
function ageFilterFuncForSearch() {
if (ageFilter === 'A') {
    Ext.getStore('LabListStore').filter('adult', '1');
} else if (ageFilter === 'C') {
    Ext.getStore('LabListStore').filter('child', '1');
}
    Ext.Viewport.setMasked(false);
}


function genderFilterFuncForSearch() {
if (genderFilter === 'M') {
    Ext.getStore('LabListStore').filter('Male', '1');
} else if (genderFilter === 'F') {
    Ext.getStore('LabListStore').filter('Female', '1');
}
}

这基本上是我的搜索设置。由于这是我的第一个Sencha Touch项目，它有点像基于试验和错误的工作流程，但它现在看起来还不错。希望有人可以分享一些指示（希望我有一些你没有想到的）。

很大一部分是从不同的SO帖子中收集的，谢谢！

我答应过我会有一些问题：

你能清楚个别过滤器吗？
如果是这样，那会更好吗？用于检查设置哪些过滤器的性能，然后只是清除那些打电话给store.clearFilter？
正如您所看到的，我的搜索功能使用正则表达式，有没有办法实现相同的目的如果没有将它转换为正则表达式对象的搜索类型，它会是什么更好的表现？

PS。关于1） - 我找到了一种方法，store.filter（'field'，''，true）;实际上会清除以相同方式设置的过滤器。我无法以相同的方式清除搜索过滤器。

优化Sencha Touch 2中的搜索功能

0 个答案: