Auto search minimal Two - lhmisho/django-eCommerce GitHub Wiki

by this search the search field will search autometically ..

form.html

<form method="GET" action="{%url "search:query" %}" class="form-ml-auto my-2 my-lg-0 search-form">
    <div class="input-group">
        <input class="form-control" type="search" id="myInput" onsearch="myFunction()" name="q" placeholder="Search" aria-label="Search" value="{{ request.GET.q }}">
        <span class="input-group-btn">
            <button onsearch="myFunction()" class="btn btn-outline-success" type="submit"><i class='fa fa-search'></i></button>
        </span>
    </div>
</form>

my javascript

<script type="text/javascript">
     $(document).ready(function(){
          var $searchForm = $(".search-form")
          var $searchInput = $searchForm.find("[name='q']")
          var $typingTimer;
          var $typingInterval = 500
          var $searchButoon = $searchForm.find("[type='submit']")
          $searchInput.keyup(function (event) {
          // key released
             clearTimeout($typingTimer)
             $typingTimer = setTimeout(performSearch,$typingInterval)
          })
          $searchInput.keydown(function (event) {
          //key pressed
              clearTimeout($typingTimer)
          })

         function displaySearh(){
            $searchButoon.addClass("disabled")
            $searchButoon.html("<i class='fa fa-spinner'></i> Searching....")
         }

        function performSearch() {
            displaySearh()
            var $query = $searchInput.val()
            setTimeout(function () {
            window.location.href='/search/?q='+ $query
         },1000)
        }
            
     })
</script>
⚠️ **GitHub.com Fallback** ⚠️