Syamsul 'isul' Arifin

Tue, Jun 14, 2016

Jquery script for Tapir

If you have a blog developed with static website generator, and you would add site search in it, Tapir may be is a choiche. There is documentation about how using tapir with jquery. But is not complete. I tried to code a Jquery script to use tapi eventhough i am not expert in Jquery. And…. this is the result, Jquery script to esecute Tapir. I have “debuged” this script and i think it’s working. This site www.isul.net/blog/, is the demo.

i assume that we have html script like this…

<form id="form">
  <input id="search" type="search" name="query">
  <input id="submit" type="button" value="submit">
</form>
 
<h2>Search results:</h2>
<div class="search_results">
</div>

and this is the Jquery script. Put this in html body before

<script src="{{ .Site.BaseURL }}js/jquery-2.2.4.min.js"></script>
<script src="{{ .Site.BaseURL }}js/jquery-tapir.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    
$( "#search" ).keypress(function( event ) {
if ( event.which == 13 ) {
var satu =  $( '#search' ).val(); 
event.preventDefault();
window.location = '?query='+satu;
}
         
});
 
$( "#submit" ).click(function() {
$( "#search" ).keypress();
});
        
$('#submit').click(function(){
var satu =  $( "#search" ).val();   
window.location = '?query='+satu;
}); 
         
$('.search_results').tapir({'token': 'YOUR_TOKEN_HERE'});
    
});
</script>

inspiration link:

1.https://forum.jquery.com/topic/onclick-goto-a-url-how 2.https://api.jquery.com/keypress/

comments powered by Disqus