Filter/Search Help

[mattinahat]

I'm trying to create a filter for my javascript search button, but I'm not sure how or if I can work it in. Heres my code:

function displayArch(query) {
  showList();
  var html = "";
  html += "<form id='archsearchform' name='archsearchform'>\n";
  html += "Search Here:\n";
  html += "<input type='text' id='archsearchquery' value='' style='width: 20%'></input>\n";
  html += "<input type='submit' value='search' onclick='displayArch(document.getElementById(\"archsearchquery\").value);return false;'></input>";
  html += "<input type='submit' value='refresh list' onclick='displayArch(\" \");return false;'></input>";
   html += "<br />\n";
  html += "<input type='checkbox' id='checkbox_CAD' name='CAD'>CAD Available\n";
  html += "<input type='checkbox' id='checkbox_Hardcopy' name='Hardcopy'>Hardcopy Available\n";
   html += "<input type='submit' value='Filter' onclick=''></input>";
  
/********** this is my problem. I dont know how to work the actual filter part into my search results
  if (document.getElementById(\"checkbox_CAD\").value == 'CAD') 
     display search results with jsonArch.archives.sheets.cad == 'y'
**********/
   
   
  html += "<br />\n";
  html += "</form>\n";
  html += "<br />\n";
  html += "<form id='archform' name='archform'>\n";
  html += "<table style='border-collapse:collapse;'>\n";
  html += "<tr>\n";
  html += "<td class='table_name' colspan='14'>Architectural Project Listings</td>\n";
  html += "</tr>\n";
  html += "<tr>\n";
  html += "  <td class='table_header'><input type='button' value='Add' onclick='viewAddArch()'></input></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"archive_num\";displayArch();'>Archive Number</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"project_title\";displayArch();'>Project Title</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"project_description\";displayArch();'>Project Description</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"project_num\";displayArch();'>Project Number</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"cip_num\";displayArch();'>CIP Number</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"drawing_date\";displayArch();'>Drawing Date</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"architectural_firm\";displayArch();'>Architectural Firm</a></td>\n";
  html += "</tr>\n";

  if (json.errorstr) {
    alert(json.errorstr);
    return;
  }
  
  //jsonArch.archives.sort(sortArch);
  var row;
  var cnt=0;
  var inSearch;
   for (var c=0; c<jsonArch.archives.length; c++) {
   inSearch = false;
    if ((query!=null)&&(query!="")) {
      if ((jsonArch.archives[c].archive_num.toLowerCase().indexOf(query)>-1)||(jsonArch.archives[c].project_title.toLowerCase().indexOf(query)>-1)||(jsonArch.archives[c].project_num.toLowerCase().indexOf(query)>-1)||(jsonArch.archives[c].drawing_date.toLowerCase().indexOf(query)>-1)||(jsonArch.archives[c].architectural_firm.toLowerCase().indexOf(query)>-1)||(jsonArch.archives[c].project_description.toLowerCase().indexOf(query)>-1)||(jsonArch.archives[c].cip_num.toLowerCase().indexOf(query)>-1)) {
        inSearch = true;
      } else {
        for (var v=0; v<jsonArch.archives[c].boxes.length; v++) {
          if (jsonArch.archives[c].boxes[v].box_num.toLowerCase().indexOf(query)>-1) {
            inSearch = true;
          }
        }
        for (var w=0; w<jsonArch.archives[c].boxes.length; w++) {
          if (jsonArch.archives[c].boxes[w].box_contents.toLowerCase().indexOf(query)>-1) {
            inSearch = true;
          }
        }
        for (var x=0; x<jsonArch.archives[c].cds.length; x++) {
          if (jsonArch.archives[c].cds[x].book_num.toLowerCase().indexOf(query)>-1) {
            inSearch = true;
          }
        }
        for (var y=0; y<jsonArch.archives[c].cds.length; y++) {
          if (jsonArch.archives[c].cds[y].cd_contents.toLowerCase().indexOf(query)>-1) {
            inSearch = true;
          }
        }
        for (var z=0; z<jsonArch.archives[c].cds.length; z++) {
          if (jsonArch.archives[c].cds[z].cd_num.toLowerCase().indexOf(query)>-1) {
            inSearch = true;
          }
        }
      }
    }
   if ((query==null)||(query=="")||(inSearch)) {
    row = (((c%2)==0)?"row_even":"row_odd");
    html += "<tr>\n";
    // this is the view button (it will be in a loop)
    html += "<td class='" + row + "'><input type='button' value='View' onclick='loadSheets(\"" + jsonArch.archives[c].archive_num + "\")'></input></td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].archive_num + "</td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].project_title + "</td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].project_description + "</td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].project_num + "</td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].cip_num + "</td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].drawing_date + "</td>\n";
    html += "<td class='" + row + "'>" + jsonArch.archives[c].architectural_firm + "</td>\n";
    html += "</tr>\n";
    cnt++;
  }
  }

  html += "</table>\n";
  html += "</form>\n";
  document.getElementById('divlist').innerHTML = html;
}

Basically I'm trying to filter all the search results that happen to have jsonArch.archives.sheets.cad == 'y'

Any help would be greatly appreciated!!

 

Thanks in advanced!

-Mattinahat

[Psycho]

You have not given enough information for anyone to help you. I have no idea by what you mean by filtering the results. Apparently all you need to do is have a condition to do something different in a specific instance:

 

if(jsonArch.archives.sheets.cad == 'y')
{
    //Do what you normally do
}
else
{
    //Do something different
}

[mattinahat]

Sorry, I'll try to re-explain. I'm trying to add a few checkboxes that will filter the results depending on if they are CAD files or not. So as of now I have search results coming from the archsearchquery, but I would like to filter those depending on which checkbox is clicked. If the "checkbox_CAD" is selected I want only the results that have jsonArch.archives.sheets.cad == 'y' to show. jsonArch.archives.sheets.cad == 'y' isnt displayed, so filtering it at this stage would be invaluable.

 

It is probably something relatively simple, but I'm confusing myself when trying to wrap it into the already existent search function.

 

Sorry for the ambiguity, and thanks again!

-Matt

[Psycho]

It appears you are getting the results from an AJAX query. You need to pass the filtering criteria along with the AJAX call and do the filtering on the server-side page that retrieves the data.

[mattinahat]

The data is already called and loaded. I need the filter to sort the data that has been called. Is there a way to just add some function that will look at the archsearchquery and only display the ones that hav jsonArch.archives.sheets.cad == 'y'  ?

 

Thanks again!

 

[Psycho]

OK, going through your code, I see some inefficiencies. The code is does a lot if looping of the records to see if there is a match with the query. The problem is that even if there is a match it continues to loop through the rest of the queries. The code below should solve that. I also added code at the beginning of the loop which should filter out non CAD entries if the CAD filter is on.

 

I'm not guranteeing it will work since I can't test it against your data. But, it should point you in the right direction. Note: You should always add plenty of comments to your code to assist others reviewing the code and for yourself.

 

function displayArch(query) {
  showList();
  var html = "";
  html += "<form id='archsearchform' name='archsearchform'>\n";
  html += "Search Here:\n";
  html += "<input type='text' id='archsearchquery' value='' style='width: 20%'></input>\n";
  html += "<input type='submit' value='search' onclick='displayArch(document.getElementById(\"archsearchquery\").value);return false;'></input>";
  html += "<input type='submit' value='refresh list' onclick='displayArch(\" \");return false;'></input>";
  html += "<br />\n";
  html += "<input type='checkbox' id='checkbox_CAD' name='CAD'>CAD Available\n";
  html += "<input type='checkbox' id='checkbox_Hardcopy' name='Hardcopy'>Hardcopy Available\n";
  html += "<input type='submit' value='Filter' onclick=''></input>";
     
  html += "<br />\n";
  html += "</form>\n";
  html += "<br />\n";
  html += "<form id='archform' name='archform'>\n";
  html += "<table style='border-collapse:collapse;'>\n";
  html += "<tr>\n";
  html += "<td class='table_name' colspan='14'>Architectural Project Listings</td>\n";
  html += "</tr>\n";
  html += "<tr>\n";
  html += "  <td class='table_header'><input type='button' value='Add' onclick='viewAddArch()'></input></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"archive_num\";displayArch();'>Archive Number</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"project_title\";displayArch();'>Project Title</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"project_description\";displayArch();'>Project Description</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"project_num\";displayArch();'>Project Number</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"cip_num\";displayArch();'>CIP Number</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"drawing_date\";displayArch();'>Drawing Date</a></td>\n";
  html += "  <td class='table_header'><a href='#' onclick='sort_type=\"architectural_firm\";displayArch();'>Architectural Firm</a></td>\n";
  html += "</tr>\n";

  if (json.errorstr) {
    alert(json.errorstr);
    return;
  }
  
  //jsonArch.archives.sort(sortArch);
  var row;
  var cnt=0;
  var inSearch;
  car CAD_Filter = (document.getElementById('checkbox_CAD').value == 'CAD');
  for (var c=0; c<jsonArch.archives.length; c++)
  {
    //Filter records is CAD_Filter is true
    if(!CAD_Filter || jsonArch.archives[c].sheets.cad == 'y')
    {
      inSearch = false;
      if ((query!=null) && (query!=""))
      {
        if (    (jsonArch.archives[c].archive_num.toLowerCase().indexOf(query)>-1)
             || (jsonArch.archives[c].project_title.toLowerCase().indexOf(query)>-1)
             || (jsonArch.archives[c].project_num.toLowerCase().indexOf(query)>-1)
             || (jsonArch.archives[c].drawing_date.toLowerCase().indexOf(query)>-1)
             || (jsonArch.archives[c].architectural_firm.toLowerCase().indexOf(query)>-1)
             || (jsonArch.archives[c].project_description.toLowerCase().indexOf(query)>-1)
             || (jsonArch.archives[c].cip_num.toLowerCase().indexOf(query)>-1)
           )
        {
          inSearch = true;
        }
        if(!inSearch)
        {
          for (var v=0; v<jsonArch.archives[c].boxes.length; v++)
          {
            if (    (jsonArch.archives[c].boxes[v].box_num.toLowerCase().indexOf(query)>-1)
                 || (jsonArch.archives[c].boxes[v].box_contents.toLowerCase().indexOf(query)>-1)
               )
            {
              inSearch = true; break;
            }
          }
        }
        if(!inSearch)
        {
          for (var x=0; x<jsonArch.archives[c].cds.length; x++)
          {
            if (    (jsonArch.archives[c].cds[x].book_num.toLowerCase().indexOf(query)>-1)
                 || (jsonArch.archives[c].cds[x].cd_contents.toLowerCase().indexOf(query)>-1)
                 || (jsonArch.archives[c].cds[x].cd_num.toLowerCase().indexOf(query)>-1)
               )
            {
              inSearch = true; break;
            }
          }
        }
      }
    
      if (query==null || query=="" || inSearch)
      {
        row = (c%2==0)?"row_even":"row_odd";
        html += "<tr>\n";
        // this is the view button (it will be in a loop)
        html += "<td class='" + row + "'><input type='button' value='View' onclick='loadSheets(\"" + jsonArch.archives[c].archive_num + "\")'></input></td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].archive_num + "</td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].project_title + "</td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].project_description + "</td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].project_num + "</td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].cip_num + "</td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].drawing_date + "</td>\n";
        html += "<td class='" + row + "'>" + jsonArch.archives[c].architectural_firm + "</td>\n";
        html += "</tr>\n";
        cnt++;
      }
    }//End If statement to filter by CAD
  }

  html += "</table>\n";
  html += "</form>\n";
  document.getElementById('divlist').innerHTML = html;
}

[mattinahat]

Thanks! That is definitely the direction I needed. And thanks for the tips, I will definitely add more comments to my code. I've just learning to code, so even seeing your code is a great help .

 

Thanks again!

-Matt