<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."
}
  • Content:
    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;
    }
  • URL: /components/raw/in-page-search/in-page-search.js
  • Filesystem Path: components/components/in-page-search/in-page-search.js
  • Size: 1.9 KB

In page search

A simple in page search function that searches a javascript array of data. Initial usecase is the interview page.

Key Features

  • Optional title and intro
  • Simple search matches on name field of data array