Auto search minimal - lhmisho/django-eCommerce GitHub Wiki

For the auto search complete we first need to add a class in the form class like (".form-class").

Hopefully after typing the search it will search automatically without any submit.

though it's only the minimal version.. more update coming soon.

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">Search</button>
        </span>
    </div>
</form>

Now it's time to add some javascript and jqury ... basically i am going to do it using jquery

<script type="text/javascript">
     $(document).ready(function () {
         var $searchForm = $(".search-form")
         var $searchForm = $(".search-form") # grabbing the form-class
         var $searchInput = $searchForm.find("[name='q']") # grabbing the form (name)
         var $typingTimer;
         var $typingInterval = 1500
         $searchInput.keyup(function (event) {
         clearTimeout($typingTimer)
         $typingTimer = setTimeout(performSearch,$typingInterval)
     })       
     function performSearch() {
        var $query = $searchInput.val()
        window.location.href='/search/?q='+ $query
    }
})

</script>
⚠️ **GitHub.com Fallback** ⚠️