Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
website/static/css/style.css
View file @ 971cb4b9
......@@ -65,3 +65,11 @@ div.container{
font-size: 25px;
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
website/static/js/typeAhead.js 0 → 100644
View file @ 971cb4b9
$.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
whats_open/templates/base.html
View file @ 971cb4b9
......@@ -5,11 +5,12 @@
<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/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/jqueryui/1.8.23/jquery-ui.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.10.2/jquery-ui.min.js"></script> <!-- Version Changed -->
<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/grid.js"></script>
<script src="{{ STATIC_URL }}js/typeAhead.js"></script>
<link href="{{ STATIC_URL}}img/glyphicons-halflings.png" rel="icons">
<head>
{% block title %}
......@@ -21,7 +22,7 @@
{% endblock %}
<body>
<div class = "container">
<!-- Title, Logo -->
<div class = "row-fluid">
<div class = "span2">
......@@ -35,6 +36,11 @@
{% now "H:i" %}
<!--All nice and static... this will too will likely be changing soon. -->
</div>
<div class="row">
<div class="span6 offset5">
<input name="field"id="searchBar"/>
</div>
</div>
{% block content%}
......@@ -42,7 +48,6 @@
<div class = "navbar">
</div>
<!-- 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