9 - Auto Search

yustianray · Oct 7, 2017 · c433c4a · c433c4a
1 parent 2072edc
commit c433c4a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/search/templates/search/snippets/search-form.html b/src/search/templates/search/snippets/search-form.html
@@ -1,4 +1,4 @@
-<form method='GET' action='{% url "search:query" %}' class="form my-2 my-lg-0">
+<form method='GET' action='{% url "search:query" %}' class="form my-2 my-lg-0 search-form">
   <div class='input-group'>
     <input class="form-control" type="text" placeholder="Search" name='q' aria-label="Search" value='{{ request.GET.q }}'>
     <span class='input-group-btn'>

diff --git a/src/templates/base.html b/src/templates/base.html
@@ -21,6 +21,40 @@
 
         <script>
           $(document).ready(function(){
+              // Auto Search
+              var searchForm = $(".search-form")
+              var searchInput = searchForm.find("[name='q']") // input name='q'
+              var typingTimer;
+              var typingInterval = 500 // .5 seconds
+              var searchBtn = searchForm.find("[type='submit']")
+              searchInput.keyup(function(event){
+                // key released
+                clearTimeout(typingTimer)
+
+                typingTimer = setTimeout(perfomSearch, typingInterval)
+              })
+
+              searchInput.keydown(function(event){
+                // key pressed
+                clearTimeout(typingTimer)
+              })
+
+              function displaySearching(){
+                searchBtn.addClass("disabled")
+                searchBtn.html("<i class='fa fa-spin fa-spinner'></i> Searching...")
+              }
+
+              function perfomSearch(){
+                displaySearching()
+                var query = searchInput.val()
+                setTimeout(function(){
+                  window.location.href='/search/?q=' + query
+                }, 1000)
+
+              }
+
+
+            // Cart + Add Products 
             var productForm = $(".form-product-ajax") // #form-product-ajax
 
             productForm.submit(function(event){