Source

article / article / templates / recipe_list.html

Diff from to

article/templates/recipe_list.html

              <div class="search-box">
                 <h2>Search by Recipe Name</h2>
                 <form action="/recipes/" method="get">
-                  <input name="qname" type="text" id="recipe" value="{{ request.GET.qname }}" required />
+                  <input name="qname" type="text" id="recipe" value="{{ request.GET.qname }}" data-provide="typeahead" data-minLength='2' data-source='[{% for i in autocomplete %}"{{ i.recipe_name }}"{% if not forloop.last %},{% endif %}{% endfor %}]' required data-items="4" autocomplete="off"/>
                   <input type="submit" value="Find recipes" class="button-orange-big-round" />
                 </form>
              </div><!-- / search-box -->
   </div><!-- / content -->  
 
 {% endblock %}
+{% block extra_body %}
+{% endblock %}
+
+{% block onready %}
+$("#recipe").typeahead();
+{% endblock %}