6.4.1 Example (With toggle) View in a new window
Click the magnifying glass icon to show the search dialog menu, as it appears on the site.
Twig: components/site-search/site-search-complete.twig
Example
Markup
<button class="site-search__toggle" id="site-search-dialog-toggle">Open dialog</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {classes: 'js-dialog site-search', toggle: 'site-search-dialog-toggle', label: 'Dialog'} %}
{% block content %}
<div class="tab-list js-tab-list">
<div class="tab-list__tab-wrapper">
<ul class="tab-list__list">
<li>
<a href="#searchSite" class="tab-list__tab">Search entire site</a>
</li>
<li>
<a href="#searchCourse" class="tab-list__tab">Search for a course</a>
</li>
<li>
<a href="#browseStudyAreas" class="tab-list__tab site-search__browse-toggle">Browse study areas</a>
</li>
</ul>
</div>
<section class="tab-list__panel" id="searchSite">
<input type="search" class="site-search__input-jumbo" placeholder="Search" autofocus>
</section>
<section class="tab-list__panel" id="searchCourse">
<input type="text" class="site-search__input-jumbo" placeholder="Search" value="Design" autofocus>
<ul class="site-search__results ui-autocomplete ui-front ui-menu ui-widget ui-widget-content">
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Design, architecture and buiding</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Creative intelligence and innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forecisic Science Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Science Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Science</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Environmental Biology</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forecisic Science</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forensic Science Bachelor of Arts in In International Studies</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__more-link">See all 137 results</a>
</div>
</li>
</ul>
</section>
<section class="tab-list__panel" id="browseStudyAreas">
<div class="site-search__browse">
<div class="site-search__category">
<h3><a href="#">Analytics & Data Science</a></h3>
<ul>
<li><a href="#">Postgraduate</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Business</a></a></h3>
<ul>
<li><a href="#">Accounting</a></li>
<li><a href="#">Economics</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">MBA Programs</a></li>
<li><a href="#">Postgraduate Programs</a></li>
<li><a href="#">Research Programs</a></li>
<li><a href="#">Undergraduate Programs</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Communication</a></h3>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Sports Media</a></li>
<li><a href="#">Digital and Social Media</a></li>
<li><a href="#">Digital Information Management</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Media Arts and Production</a></li>
<li><a href="#">Public Communication</a></li>
<li><a href="#">Social and Political Sciences</a></li>
<li><a href="#">Music and Sound Design</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Creative Intelligence and Innovation</a></h3>
<ul>
<li><a href="#">Creative Intelligence and Innovation</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Design, Architecture and Building</a></h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Design Innovation</a></li>
<li><a href="#">Architecture</a></li>
<li><a href="#">Built Environment</a></li>
<li><a href="#">DAB Research</a></li>
<li><a href="#">Local Government</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Education</a></h3>
<ul>
<li><a href="#">Master of Education</a></li>
<li><a href="#">Primary Education</a></li>
<li><a href="#">Secondary Education</a></li>
<li><a href="#">TESOL</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Engineering</a></h3>
<ul>
<li><a href="#">Undergraduate courses</a></li>
<li><a href="#">Postgraduate courses</a></li>
<li><a href="#">Biomedical</a></li>
<li><a href="#">Civil and Environmental</a></li>
<li><a href="#">Computer Systems and Software</a></li>
<li><a href="#">Electrical</a></li>
<li><a href="#">Engineering Management</a></li>
<li><a href="#">Mechanical and Mechatronic</a></li>
<li><a href="#">Systems and Operations</a></li>
<li><a href="#">Telecommunications</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Health</a></h3>
<ul>
<li><a href="#">Nursing (Undergraduate)</a></li>
<li><a href="#">Nursing (Postgraduate)</a></li>
<li><a href="#">Midwifery</a></li>
<li><a href="#">Sport and Exercise</a></li>
<li><a href="#">Public Health</a></li>
<li><a href="#">Health Science</a></li>
<li><a href="#">Health Services Management</a></li>
<li><a href="#">Health Policy</a></li>
<li><a href="#">Health (Postgraduate)</a></li>
<li><a href="#">Research and Honours</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Health (GEM)</a></h3>
<ul>
<li><a href="#">Physiotherapy</a></li>
<li><a href="#">Orthoptics</a></li>
<li><a href="#">Clinical Psychology</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Good Manufacturing Practice</a></li>
<li><a href="#">Pharmaceutical Science</a></li>
<li><a href="#">Health Policy</a></li>
<li><a href="#">Coursework Degrees</a></li>
<li><a href="#">Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Information Technology</a></h3>
<ul>
<li><a href="#">Undergraduate courses</a></li>
<li><a href="#">Postgraduate courses</a></li>
<li><a href="#">Business Analysis and Information Systems</a></li>
<li><a href="#">Computer Science, Data Analytics/Mining</a></li>
<li><a href="#">Games, Graphics and Multimedia</a></li>
<li><a href="#">IT Management and Leadership</a></li>
<li><a href="#">Networking and Security</a></li>
<li><a href="#">Software Development and Programming</a></li>
<li><a href="#">Systems Design and Analysis</a></li>
<li><a href="#">Web and Cloud Computing</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">International Studies</a></h3>
<ul>
<li><a href="#">Global Studies</a></li>
<li><a href="#">International Studies</a></li>
<li><a href="#">Languages</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Law</a></h3>
<ul>
<li><a href="#">Undergraduate Law Programs</a></li>
<li><a href="#">Juris Doctor</a></li>
<li><a href="#">Legal Studies</a></li>
<li><a href="#">Practical Legal Training</a></li>
<li><a href="#">Intellectual Property</a></li>
<li><a href="#">Dispute Resolution</a></li>
<li><a href="#">Master of Laws</a></li>
<li><a href="#">Higher Degree Research</a></li>
<li><a href="#">Overseas Practitioner Programs</a></li>
<li><a href="#">Postgraduate Law Programs</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Science</a></h3>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Postgraduate Programs</a></li>
<li><a href="#">Research Programs</a></li>
<li><a href="#">Life Sciences</a></li>
<li><a href="#">Mathematical and Physical Sciences</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Transdisciplinary Innovation</a></h3>
<ul>
<li><a href="#">UTS Animal Logic Academy</a></li>
<li><a href="#">Creative Intelligence and Innovation</a></li>
<li><a href="#">Transdisciplinary Innovation</a></li>
</ul>
</div>
</div>
</section>
</div>
{% endblock %}
{% endembed %}