2017-11-16 3 views
0

NodeJSとAngularJSでアプリケーションを構築しています。AngularJSサーバー側のマルチカラム検索

私は、複数の列の検索機能を構築しています。ユーザーは検索キーワードを別々の検索ボックス(各列の最上部)に入力し、その列に基づいて結果を取得できます。

enter image description here

これまでのところ私は、同時にすべての属性を検索し、単一の検索ボックスを持っています。

複数の属性に基づいて結果を返す複数の個別の検索ボックスを実装するにはどうすればよいですか?

注:これはパフォーマンス上の理由からサーバー側で実装したいと考えています。 (私は単にHTML属性| filter:column1 | filter:column2を使用できますが、可能であればこの手法を避けたいと思います)。

これまでのコードは次のとおりです。私は、ビューに設定された何らかの種類の "searchBy"変数を渡し、次に複数のクエリ/属性のペアで検索するように検索メソッドを更新する必要があると考えています。

//Search service factory 
    //Initialize filtered items and get search results 
    function search(items, query) { 
     this.filteredItems = $filter('filter')(items, function (item) { 
     for(var attr in item) { 
      if (searchMatch(item[attr], query)) 
      return true; 
     } 
     return false; 
     }); 
     return this.filteredItems; 
    } 

    function searchMatch(haystack, needle) { 
     if (!needle) { 
     return true; 
     } 
     return haystack.toString().toLowerCase().indexOf(needle.toLowerCase()) !== -1; 
    }; 

//Controller 
    vm.filteredItems = vm.search(vm.unfilteredItems, vm.query); 

//View 
    input(type='text', ng-model='vm.query', ng-change='vm.search(vm.unfilteredItems, vm.query)', placeholder='Search') 

答えて

0

この問題を解決するには、最初に各検索ボックスのオブジェクトの配列を作成し、ng-repeat属性を持つビュー内のこれらのボックスを繰り返します。

//Controller 
var vm = this; 
var vm.unfilteredItems; //data source query removed for brevity 

//Initialize search inputs 
vm.search_by_inputs = [ 
    {search_column: 'id', search_query: ''}, 
    {search_column: 'requester', search_query: ''}, 
    {search_column: 'dataowner', search_query: ''} 
]; 

function initSearch() { 
    vm.filtered_items = vm.search(vm.unfiltered_items, vm.search_by_inputs); 
} 

//View 
input.input-large.search-query(type='text', value='{{search_by.search_query}}', ng-model='search_by.search_query' ng-change='vm.initSearch()', placeholder='Search') 

次のステップは、コントローラでsearch_by_inputsオブジェクトをループにあり、図にsearchboxesに入力された検索値を有するだけ入力して新しいオブジェクトを作成します。検索メソッドでは、組み込みの「フィルタ」コンポーネントが各アイテムを繰り返し処理し、そのループ内で各検索語句がその値とプロパティに一致する列名でチェックされます。

私は最適化、パフォーマンス、テクニックなどの点でこのソリューションに関するいくつかのフィードバックをお寄せいただき誠にありがとうございます!

関連する問題