11@model string
22
33<form id =" search" asp-controller =" search" asp-action =" results" method =" get" role =" search"
4- <div class =" nhsuk-u-margin-bottom-5 nhsuk-header__search-form--search-results"
4+ <div class =" nhsuk-u-margin-bottom-5 nhsuk-header__search-form--search-results" style = " position : relative !important "
55 <label class =" nhsuk-label nhsuk-u-visually-hidden" for =" sub-search-field" label >
66 <input class =" nhsuk-input nhsuk-search__input" type =" search" name =" term" autocomplete =" off" id =" sub-search-field" placeholder =" Search the learning hub" value =" @Model"
7+ <ul id =" sub-search-field_listbox" class =" nhsuk-list autosuggestion-menu" style =" display none ;top 100% ;" ul >
78 <button class =" nhsuk-search__submit" type =" submit"
89 <span class =" nhsuk-u-visually-hidden" span >
910 <svg class =" nhsuk-icon nhsuk-icon__search" xmlns =" http://www.w3.org/2000/svg" viewBox =" 0 0 24 24" aria-hidden =" true" focusable =" false"
1011 <path d =" M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z" path >
1112 </svg >
1213 </button >
1314 </div >
14- </form >
15+ </form >
16+
17+ <script type =" text/javascript"
18+ document .addEventListener (" DOMContentLoaded" function () {
19+ var searchInput = document .getElementById (" sub-search-field"
20+ var suggestionsList = document .getElementById (" sub-search-field_listbox"
21+ var minLengthAutoComplete = 3 ;
22+
23+ function fetchSuggestions (term ) {
24+ var xhr = new XMLHttpRequest ();
25+ xhr .open (" GET" ' @Url.Action("GetAutoSuggestion", "Search")' + ' ?term=' + encodeURIComponent (term), true );
26+ xhr .onload = function () {
27+ if (xhr .status >= 200 && xhr .status < 400 ) {
28+ if (xhr .responseText .trim ().length > 5 ) {
29+ suggestionsList .style .display = " block"
30+ suggestionsList .innerHTML = xhr .responseText ;
31+ }
32+ else {
33+ closeAllLists ();
34+ }
35+ } else {
36+ closeAllLists ();
37+ }
38+ };
39+ xhr .onerror = function () {
40+ closeAllLists ();
41+ };
42+ xhr .send ();
43+ }
44+
45+ function autocomplete (input , minLength ) {
46+ if (input != null ) {
47+ input .addEventListener (" input" function () {
48+ var val = this .value ;
49+ if (val .length < minLength) {
50+ closeAllLists ();
51+ return false ;
52+ }
53+ fetchSuggestions (val);
54+ });
55+
56+ document .addEventListener (" click" function (e ) {
57+ if (! searchInput .contains (e .target )) {
58+ suggestionsList .style .display = " none"
59+ } else {
60+ var val = searchInput .value ;
61+ if (val .length >= minLengthAutoComplete) {
62+ if (suggestionsList .children .length > 0 ) { suggestionsList .style .display = " block"
63+ }
64+ }
65+ });
66+ }
67+ }
68+
69+ function closeAllLists () {
70+ suggestionsList .innerHTML = ' '
71+ suggestionsList .style .display = " none"
72+ }
73+
74+ autocomplete (searchInput, minLengthAutoComplete);
75+ });
76+ script >
0 commit comments