How to implement filter search result with JSONP result?

How to implement filter search result with JSONP result?

I have seen this done in many places and I like to implement this feature in my search result. I have a page that shows all the result of a search term(s). On the same page, there are two tabs (All and Refine) and the by default all the search results will be displayed in the All tab. Once the user clicked on this "Refine" tab, put check marks on a bunch of checkbox (search result's parent) that he's interested in narrowing down his search. He clicked the submit/filter button and the search results in the "All" tab automatically shrink/increase base on how many of those checkbox he checked. The checkbox value's attribute contains the value of each search result's parent ID. So the number of results are based on if their parent field containd the same ID as the ones checked by the user. Sorry if I didn't explain this better. If you can point me to video tutorials or links that will be great. Below is the code for processing the search, shows the results, and display the result's parent name.

  1. var searchValue = urlParams[queryParamName];
  2. //make an API call to search third party API
  3. var myExp = new RegExp(searchValue, "i");
  4. $.getJSON('/customcf/example/ajaxProxy-KB.cfm', {
  5.     proxyURL: 'https://app.example.com/api/head/suggest.json',
  6.     //                type: 'get',
  7.     name: {
  8.         $regex: searchValue,
  9.         //$options: "i"
  10.     }
  11. },                 
  12. function(data) {             
  13.     var output = '<div class="koSearchResult">';
  14.     var technology = "";
  15.     var refineSearch =  "";
  16.     var studentForms = "";
  17.     var D2L = "";
  18.     var arrayParent = [];
  19.     $.each(data.data, function(i, article) {
  20.         var txtSum = article.summary.toString();
  21.         var txtTitle = article.name;
  22.         var re = new RegExp('\\b(' + searchValue + ')\\b', 'gi');                 
  23.         txtSum = txtSum.replace(re, '<span>$1</span>');                     
  24.         txtTitle = txtTitle.replace(re, '<span>$1</span>');
  25.         output += '<h6>';
  26.         output += '<a href="../kb/article/'+ article.url_hash + '">' + txtTitle  + '</a>';
  27.         if(article.inherited_roles !==  null || article.reader_roles != "")
  28.         {
  29.             output += " <img src='../images/Lock-icon.png' />";
  30.         }
  31.         output += '</h6>';
  32.         output += '<p>' + txtSum + '</p>';
  33.        
  34.         //go through the parents fields array and store all unique parent IDs in an array
  35.         $.each(article.parents, function(index, value){
  36.             if($.inArray(value, arrayParent) < 0){
  37.                 arrayParent.push(value);                               
  38.             }
  39.         });
  40.        
  41.     });
  42.    
  43.     $.getJSON('https://app.example.com/api/head/category.jsonp?callback=?', {
  44.         _authbykey: "572244a232131c887c11d11d",
  45.         _fields: ["name"],
  46.         id:{
  47.             "$in": arrayParent
  48.         },
  49.     },
  50.     function(dataParent) {
  51.         //console.log("data length: ", dataParent.data.length);
  52.         refineSearch = "<fieldset><legend>Refine your search</legend>";
  53.         $.each(dataParent.data, function(i, parent) {
  54.             refineSearch += '<input type="checkbox" name="' + parent.name.en + '" value="' + parent.id + '" />' + ' ' + parent.name.en + '<br />';
  55.         });
  56.        
  57.         refineSearch += "</fieldset>";
  58.         //this is putting the parents name and ID in the Refine search tab
  59.         $("##refineYourSearch").replaceWith(refineSearch);
  60.     }).fail(function(err){
  61.         console.log("fail",err);
  62.     });
  63.    
  64.     output += '</div>';   
  65.     $("##resultarea").replaceWith(output);
  66.    
  67. }); //get JSON