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> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| 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
Search By Tags:
