Difference between revisions of "Team:William and Mary/Outreach DB/Fuzzy Search"

(Created page with "{{Team:William_and_Mary/CSS_RESET}} {{Team:William_and_Mary/CSS_FIX}} {{Team:William_and_Mary/SOURCE}} {{Team:William_and_Mary/HEADER2}} <html lang="en"> <head> <meta char...")
 
 
(14 intermediate revisions by the same user not shown)
Line 20: Line 20:
 
     }
 
     }
  
     .tag-label{
+
     .tag-label {
 
       margin-left: 15px;
 
       margin-left: 15px;
 
       vertical-align: top;
 
       vertical-align: top;
Line 27: Line 27:
 
     }
 
     }
  
     .tag{
+
     .tag {
 
       display: inline-block;
 
       display: inline-block;
 
     }
 
     }
 
 
 
   </style>
 
   </style>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
Line 38: Line 36:
 
   <script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
 
   <script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
 
   <script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
 
   <script src='https://2017.igem.org/Team:William_and_Mary/outreach_db_js?action=raw&ctype=text/javascript' type='text/javascript'></script>
 +
  <script src='https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js'></script>
 
   <!--script src='outreach_db.js'></script-->
 
   <!--script src='outreach_db.js'></script-->
  
Line 50: Line 49:
 
         {{#each this}}
 
         {{#each this}}
 
         <li class='tag'>
 
         <li class='tag'>
           <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox'/><label class='tag-label'>{{this}}</label>
+
           <input type='checkbox' name='{{@../key}}' value='{{this}}' class='tag-checkbox' /><label class='tag-label'>{{this}}</label>
 
         </li>
 
         </li>
 
         <br> {{/each}}
 
         <br> {{/each}}
Line 148: Line 147:
 
             $(this).parent().find(".tag-type").toggle();
 
             $(this).parent().find(".tag-type").toggle();
 
           });
 
           });
 +
          outreach_arr = alasql('select * from outreach')
 +
          var options = {
 +
            shouldSort: true,
 +
            threshold: 0.6,
 +
            location: 0,
 +
            distance: 100,
 +
            maxPatternLength: 32,
 +
            minMatchCharLength: 1,
 +
            keys: Object.keys(outreach_arr[0])
 +
          };
 +
          fuse = new Fuse(outreach_arr, options); // "list" is the item array
 
         }
 
         }
 
       );
 
       );
Line 184: Line 194:
 
     }
 
     }
  
 +
    function fulltext_search(str){
 +
      show_results(search_result = fuse.search(str))
 +
    }
 
     function show_details(outreach_id) {
 
     function show_details(outreach_id) {
 
       datastring = encodeURIComponent(
 
       datastring = encodeURIComponent(
Line 222: Line 235:
 
<body>
 
<body>
 
   <br></br>
 
   <br></br>
<br></br>
+
  <br></br>
  
 
   <center><img src="https://static.igem.org/mediawiki/2017/4/41/T--William_and_Mary--Database383.jpeg" width=360/></center>
 
   <center><img src="https://static.igem.org/mediawiki/2017/4/41/T--William_and_Mary--Database383.jpeg" width=360/></center>
 
   <br></br>
 
   <br></br>
  
 
<div class="row">
 
  <div class="col-sm-1"></div>
 
    <div class="col-sm-11" style='padding: top: 50px;font-size: 16px;'>
 
      <form onsubmit="show_details(parseInt(document.getElementById('input-id').value, 10).toString())">
 
        Quick ID Jump: <input type="number" name="id" id="input-id">
 
        <input type="submit" id="getid" value="Go">
 
      </form>
 
    </div>
 
</div>
 
  
  
Line 242: Line 245:
  
 
   <div class="container">
 
   <div class="container">
 +
    <div class="row">
 +
      <div class="col-lg-11" style='padding: top: 50px;font-size: 16px;'>
 +
        <form onsubmit="show_details(parseInt(document.getElementById('input-id').value, 10).toString()); return false">
 +
          Quick ID Jump:<br /> <input type="number" name="id" id="input-id">
 +
          <input type="submit" id="getid" value="Go">
 +
        </form>
 +
        <form onsubmit="fulltext_search(document.getElementById('input-fuzzy').value); return false">
 +
          Fuzzy Search:<br /> <input type="text" name="fuzzy" id="input-fuzzy">
 +
          <input type="submit" id="get-fuzzy" value="Go">
 +
      </div>
 +
    </div>
 +
 +
    <center>
 +
      OR
 +
    </center>
 +
 +
    <h2>Search By Tags:</h2>
 
     <div id='checkbox-area' style='padding-top: 30px;'>
 
     <div id='checkbox-area' style='padding-top: 30px;'>
  

Latest revision as of 00:40, 2 November 2017

Outreach Database: select tags for search





Quick ID Jump:
Fuzzy Search:
OR

Search By Tags: