如何在大型列表的角度中提高搜索过滤器的性能

时间:2018-05-05 17:28:50

标签: javascript angular performance search ionic-framework

在搜索栏中输入时,鼠标事件会在键入时暂停几秒钟,直到数据加载为止(似乎每个点击事件都会触发数据加载到搜索中)这种情况会在前几次输入时发生搜索过滤器管道)没有搜索管道它仍然很慢。请帮助谢谢 请点击链接查看stackblitz示例:

https://ionic-6cbe9t.stackblitz.io

searchFilter(searchTerm){
  if(searchTerm != ''){
    searchTerm = searchTerm.toLowerCase();
  }

  if(!this.listFromArray){
    return Immutable.List();
 }

  if(!searchTerm){
    return this.listFromArray;
  }

  return  this.listFromArray.filter((address) => {
    return address.Company.toLowerCase().includes(searchTerm) ||
        address.Phone.toString().includes(searchTerm) ||
        address.Street.toLowerCase().includes(searchTerm) ||
        address.City.toLowerCase().includes(searchTerm)  ||
        address.Phone.includes(searchTerm);
  });
}

1 个答案:

答案 0 :(得分:1)

How make a "debounceTime" search

Your component.html

  listViewOfReastaurants.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(getApplicationContext(), ((TextView) view).getText(),
                        Toast.LENGTH_LONG).show();
                Intent myIntent = new Intent(getApplicationContext(),
                        DishOfTheDay.class);
                Context context=getBaseContext();
                context.startActivity(myIntent);
            }
        });

In your component.ts

    String url = "https://try.discourse.org/";
    webView = (WebView) findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);

    webView.setWebViewClient(new WebViewClient() {


        @SuppressWarnings("deprecation")
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

                Intent i = new Intent(getBaseContext(), WebViewActivity.class);
                i.putExtra("testUrl", url);
                startActivity(i);
                return true; 
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);

        }


        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);

        }

    });

 webView.loadUrl(url);

NOTE: The code is largely inspired from https://alligator.io/angular/real-time-search-angular-rxjs/