<section class="text-block" role="region" aria-labelledby="interview-courses">
<h2 id="interview-courses">Interview courses</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec rutrum metus. Donec et sodales tellus, vitae lacinia erat. In faucibus urna arcu, in ullamcorper diam feugiat eu.</p>
<div class="in-page-search">
<form method="GET" action="" data-attr-no-results-message="No results found, please try again.">
<div class="search-input-group search-input-group-outline">
<label for="interview-search" class="search-input-label">Search courses</label>
<input type="text" class="search-input" name="query" placeholder="" id="interview-search">
<div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100;">
<div class="tt-dataset tt-dataset-organic"></div>
</div>
<button class="search-button" type="button">
<i class="uod-icons uod-icons-search"></i>
<span class="search-button-overlay"><i class="uod-icons uod-icons-search"></i>search</span>
</button>
</div>
</form>
</div>
</section>
<script type="text/javascript">
// dummy data
var courses = [{
"name": "Accounting and Finance MSc",
"url": "https://www.derby.ac.uk/postgraduate/accounting-courses/accounting-finance-msc/"
},
{
"name": "Accounting (Joint Honours)",
"url": "https://www.derby.ac.uk/undergraduate/accounting-courses/accounting-joint-honours/"
},
{
"name": "Accounting and Finance BA (Hons)",
"url": "https://www.derby.ac.uk/undergraduate/accounting-courses/accounting-and-finance-ba-hons/"
},
];
</script>
{% embed '@text-block' with { title: 'Interview courses' } %}
{% block content %}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec rutrum metus. Donec et sodales tellus, vitae lacinia erat. In faucibus urna arcu, in ullamcorper diam feugiat eu.</p>
<div class="in-page-search">
<form method="GET" action=""{% if noResultsMessage %} data-attr-no-results-message="{{ noResultsMessage }}"{% endif %}>
{% embed '@search-input' with { highContrast: highContrast, value: value, fieldId: fieldId } %}
{% block results %}
<div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100;">
<div class="tt-dataset tt-dataset-organic"></div>
</div>
{% endblock %}
{% endembed %}
</form>
</div>
{% endblock %}
{% endembed %}
<script type="text/javascript">
// dummy data
var courses = [
{
"name": "Accounting and Finance MSc",
"url": "https://www.derby.ac.uk/postgraduate/accounting-courses/accounting-finance-msc/"
},
{
"name": "Accounting (Joint Honours)",
"url": "https://www.derby.ac.uk/undergraduate/accounting-courses/accounting-joint-honours/"
},
{
"name": "Accounting and Finance BA (Hons)",
"url": "https://www.derby.ac.uk/undergraduate/accounting-courses/accounting-and-finance-ba-hons/"
},
];
</script>
{
"highContrast": true,
"fieldId": "interview-search",
"label": "Search courses",
"noResultsMessage": "No results found, please try again."
}
import $ from 'jquery'
// Search the data using the user text input.
$(".in-page-search .search-input").keyup(function() {
// Set the form id and search term (user input).
var form_id = this.id,
search_term = $(this).val().toLowerCase(),
results_holder = $('#' + form_id).next('.tt-menu'),
no_results_message = $(this).closest('form').attr('data-attr-no-results-message');
// Set the search data
var search_list = courses;
// Wait until the search term length is greater than two characters before starting the search.
if ( search_term.length > 2 ) {
var results = search_data( form_id, search_term, search_list );
// Make sure the results div is empty before adding new results.
results_holder.children('.tt-dataset').html('');
// Show error message if no results have been found.
if (results.length === 0) {
results_holder.children('.tt-dataset').html('<div class=\"tt-suggestion tt-selectable\">' + no_results_message + '</div>');
} else {
results_holder.children('.tt-dataset').html(results);
}
results_holder.fadeIn();
} else {
results_holder.fadeOut();
}
});
function search_data( form_id, search_term, search_list ) {
// Set empty arrays for the left and right results columns.
var results = [];
// Search for stuff
for ( var i = 0; i < search_list.length; i++ ) {
var link, link_url, link_text;
if ( search_list[i].name.toLowerCase().indexOf(search_term) >= 0 ) {
// Build the link
link_url = search_list[i].url;
link_text = search_list[i].name;
link = "<a class=\"tt-suggestion tt-selectable\" href='" + link_url + "'>" + link_text + "</a>";
results.unshift(link);
}
}
results = results.join("");
return results;
}
.in-page-search {
position: relative;
@include autocomplete-in-page-search;
}
A simple in page search function that searches a javascript array of data. Initial usecase is the interview page.