title: how do I best display matches from a large json object?
body: <p>I am loading data from a json object into a table on my page. Then I allow the user to filter that data via an input and display only the matches. My method of doing this is surely not great but it does work.</p>
  
  <p>Now I want to do the exact same thing with a list of airports and their codes. Problem is that the airport list is much longer and the page bogs down significantly when loading the table with data and when it searches for the user's input in the table.</p>
  
  <p>Here's the information for the page that does work so you can se what Im doing.</p>
  
  <p><strong>What can I do differently to achive the same effect I have here when I have a much larger data set to search?</strong></p>
  
  <p>Page Displaying data: (type "american airlines" or "aa"as an example)
  <a href="https://pnrbuilder.com/_popups/dataDecoder.php" rel="nofollow">https://pnrbuilder.com/_popups/dataDecoder.php</a></p>
  
  <p>json object containing airline information:
  <a href="https://pnrbuilder.com/_java/airlineDecoder.js" rel="nofollow">https://pnrbuilder.com/_java/airlineDecoder.js</a></p>
  
  <p>Sript that loads data to the page and filters it based on user input:
  <a href="https://pnrbuilder.com/_java/decodeData.js" rel="nofollow">https://pnrbuilder.com/_java/decodeData.js</a> </p>
  
  <hr>
  
  <p>Here's the most significant parts of my code:</p>
  
  <pre><code>// This function is called by a for loop on dom ready
  // It basically prints data stored in a json object to a table on the page 
  
  
  
  function fillInfo(line) {
  
      var table = document.getElementById('decodeTable');
  
      var row = document.createElement('tr');
      table.appendChild(row);
  
      var col1 = document.createElement('td');
      row.appendChild(col1);
      var curCode = document.createTextNode(arlnInfo.d[line].IATA);
      col1.appendChild(curCode);
  
      var col2 = document.createElement('td');
      row.appendChild(col2);
      var curArln = document.createTextNode(arlnInfo.d[line].Airline);
      col2.appendChild(curArln);
  
      var col3 = document.createElement('td');
      row.appendChild(col3);
      var curPre = document.createTextNode(arlnInfo.d[line].Prefix);
      col3.appendChild(curPre);
  
      var col4 = document.createElement('td');
      row.appendChild(col4);
      var curIcao = document.createTextNode(arlnInfo.d[line].ICAO);
      col4.appendChild(curIcao);
  
      var col5 = document.createElement('td');
      row.appendChild(col5);
      var curCnty = document.createTextNode(arlnInfo.d[line].Country);
      col5.appendChild(curCnty);
  
  
  }
  
  
  // This function checks user input against data in the table 
  // If a match is found whitin a row, the row containing the match is shown
  // If a match is not found that row is hidden 
  
  
  
  function filterTable(input) {
  
      var decodeTable = document.getElementById('decodeTable');
      var inputLength = input.length;
  
  
  // THis first part makes sure that all rows of the generated table are hidden when no input is present 
  
      if (inputLength == 0) {            
  
          for (var r = 1; r &lt; decodeTable.rows.length; r++) {
  
              decodeTable.rows[r].style.display = "none";
  
          }
  
      } 
  
  
  // This part checks just the airline codes "column" of the table when input is only one or two characters
  
  
      else if (inputLength &lt; 3) {
  
          for (var r = 1; r &lt; decodeTable.rows.length; r++) {
  
              var celVal = $(decodeTable.rows[r].cells[0])
                  .text()
                  .slice(0, inputLength)
                  .toLowerCase();
              if (celVal == input) {
                  decodeTable.rows[r].style.display = "";
              } else {
                  decodeTable.rows[r].style.display = "none";
              }
  
          }
      }
  
  // This part checks several "columns" of the table when input is more than two characters
  
      else if (inputLength &gt; 2) {
  
          for (var r = 1; r &lt; decodeTable.rows.length; r++) {
  
              var celVal = $(decodeTable.rows[r].cells[2])
                  .text()
                  .slice(0, inputLength)
                  .toLowerCase();
              var celVal2 = $(decodeTable.rows[r].cells[1])
                  .text();
              if (celVal == input || celVal2 == input) {
                  decodeTable.rows[r].style.display = "";
              } else if (celVal2.replace(/&lt;[^&gt;]+&gt;/g, "")
                  .toLowerCase()
                  .indexOf(input) &gt;= 0) {
                  decodeTable.rows[r].style.display = "";
              } else {
                  decodeTable.rows[r].style.display = "none";
              }
  
          }
      }
  
  }
  </code></pre>