Scott Nixon avatar Scott Nixon committed efc4513 Draft

Added autocomplete to the recipe name search. Upgrade Bootstrap JS only to 2.0.4.

Comments (0)

Files changed (3)

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 %}

article/templates/theme_base.html

         
     
     {% block extra_body_base %}
-    <script src="//css.happyherbivore.com/bootstrap.min.js"></script>
+    <script src="//css.happyherbivore.com/bootstrap204/js/bootstrap.min.js"></script>
         {% block extra_body %}{% endblock %}
+        $(document).ready(function(){
+        {% block onready %}{% endblock %}
+        });
     {% endblock %}
 
     {% gblock 13 for "gblocks.Text" into "viglink" %}
         return queryparams
 
     current_site = Site.objects.get_current()
+    autocomplete = Recipe.active.filter(sites=current_site.id).order_by('recipe_name')
     sub_featured = Recipe.active.filter(recipephotos__type=3, 
                                         featured_items=3)[:7]
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.