Commit 971cb4b9 authored by Renfred Harper's avatar Renfred Harper
Browse files

Typeahead Search Box

Added a search bar that can autocomplete and edit the CSS of all
relevant restaurants on the page. For now it just hightlights them.
parent b30114ac
...@@ -65,3 +65,11 @@ div.container{ ...@@ -65,3 +65,11 @@ div.container{
font-size: 25px; font-size: 25px;
font-family:"Courier New", Courier, monospace; font-family:"Courier New", Courier, monospace;
} }
#searchBar{
margin-top: 10px;
margin-bottom: 10px;
}
ul.ui-autocomplete {
list-style: none;
visibility: hidden;
}
\ No newline at end of file
$.ajax({
url: '/ajax/schedule/',
}).done(function (data) {
//collecting list of restaurant names from server data
var restaurants = [];
for (var i = 0; i < data.data.length; i++) {
restaurants.push(data.data[i].name);
};
//Monitors for keyboard activity to detect when the input field is empty
$('#searchBar').keyup(function() {
var value = $('#searchBar').val();
if (value == 0){
//resets all backgrounds to white if the search bar is empty
$('.open').css('background-color','white');
$('.closed').css('background-color','white');
}
});
// For doumentation on jQuery's autocomplete: (api.jqueryui.com/autocomplete)
$("#searchBar").autocomplete({
source: restaurants,
//making it so the search result list doesn't physically appear
messages: {
noResults: '',
results: function(){}
},
response: function(event, ui) {
//resets all backgrounds to white if the search bar is edited
$('.open').css('background-color','white');
$('.closed').css('background-color','white');
//ui.content array contains all names that are returned from the search
for (var result in ui.content){
//Highlights all search results
$('.open:contains("'+ui.content[result].value+'")').css('background-color','#FDFFBF');
$('.closed:contains("'+ui.content[result].value+'")').css('background-color','#FDFFBF');
}
}
});
});
\ No newline at end of file
...@@ -5,11 +5,12 @@ ...@@ -5,11 +5,12 @@
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet"> <link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/style.css" rel="stylesheet"> <link href="{{ STATIC_URL }}css/style.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Version Changed -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <!-- Version Changed -->
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script> <script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script> <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/grid.js"></script> <script src="{{ STATIC_URL }}js/grid.js"></script>
<script src="{{ STATIC_URL }}js/typeAhead.js"></script>
<link href="{{ STATIC_URL}}img/glyphicons-halflings.png" rel="icons"> <link href="{{ STATIC_URL}}img/glyphicons-halflings.png" rel="icons">
<head> <head>
{% block title %} {% block title %}
...@@ -21,7 +22,7 @@ ...@@ -21,7 +22,7 @@
{% endblock %} {% endblock %}
<body> <body>
<div class = "container"> <div class = "container">
<!-- Title, Logo --> <!-- Title, Logo -->
<div class = "row-fluid"> <div class = "row-fluid">
<div class = "span2"> <div class = "span2">
...@@ -35,6 +36,11 @@ ...@@ -35,6 +36,11 @@
{% now "H:i" %} {% now "H:i" %}
<!--All nice and static... this will too will likely be changing soon. --> <!--All nice and static... this will too will likely be changing soon. -->
</div> </div>
<div class="row">
<div class="span6 offset5">
<input name="field"id="searchBar"/>
</div>
</div>
{% block content%} {% block content%}
...@@ -42,7 +48,6 @@ ...@@ -42,7 +48,6 @@
<div class = "navbar"> <div class = "navbar">
</div> </div>
<!-- Footers --> <!-- Footers -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment