https://www.openbanking.org.uk/wp-content/themes/open-banking/js/src/adv-search.js?ver=7.1.1

1/* eslint-disable */
2/**
3 * Advanced Search Script.
4 */
5
6(() => {
7  const debounce = (func, wait) => {
8    let timeout;
9
10    return function executedFunction(...args) {
11      const later = () => {
12        clearTimeout(timeout);
13        func(...args);
14      };
15
16      clearTimeout(timeout);
17      timeout = setTimeout(later, wait);
18    };
19  };
20
21  const triggerFormActions = element => {
22    const searchListButton = element.querySelector('.search-term a');
23    searchListButton.addEventListener('click', () => {
24      document.getElementById('form-advanced-search').submit();
25    });
26
27    const searchInput = element.previousElementSibling;
28    searchInput.addEventListener('click', () => {
29      if (element.firstChild) {
30        element.classList.add('is-active');
31      }
32    });
33  };
34
35  const triggerAjaxSearch = value => {
36    const nonce = ob_adv_search.nonce; // eslint-disable-line
37    const ajaxUrl = ob_adv_search.ajax_url; // eslint-disable-line
38
39    const xhttp = new XMLHttpRequest();
40    xhttp.onreadystatechange = function () {
41      const loader = document.querySelector('.loader');
42      loader.classList.add('is-active');
43
44      if (this.readyState === 4) {
45        loader.classList.remove('is-active');
46        const response = JSON.parse(xhttp.response);
47        if (response.results) {
48          const searchBox = document.querySelector('.search-input-fields__predictive');
49          searchBox.classList.add('is-active');
50          searchBox.innerHTML = '';
51
52          if (response.results.length === 0) {
53            // No results found.
54            const li = document.createElement('li');
55            li.className = 'search-input-fields__predictive-item';
56            li.textContent = response.no_results;
57            searchBox.appendChild(li);
58          } else {
59            // Add search results
60            response.results.forEach(item => {
61              const li = document.createElement('li');
62              li.className = 'search-input-fields__predictive-item';
63
64              const a = document.createElement('a');
65              a.href = item.href;
66              a.title = item.title;
67
68              // Insert safe bold HTML for title_bold. Only allow <b> tags, so use innerHTML here, but only with trusted formatting
69              // a.innerHTML = item.title_bold.replace(/%%(.*?)%%/, '<b>$1</b>');
70              item.title_parts.forEach(part => {
71                if (typeof part === 'string') {
72                  a.appendChild(document.createTextNode(part));
73                } else if (part.bold) {
74                  const b = document.createElement('b');
75                  b.textContent = part.bold;
76                  a.appendChild(b);
77                }
78              });
79
80              li.appendChild(a);
81              searchBox.appendChild(li);
82            });
83          }
84
85          // Add search term label.
86          const term_li = document.createElement('li');
87          term_li.className = 'search-input-fields__predictive-item search-term';
88
89          const term_span = document.createElement('span');
90          term_span.textContent = response.search_term_prefix;
91
92          const term_br = document.createElement('br');
93
94          const term_a = document.createElement('a');
95          term_a.title = response.search_term_prefix + response.search_term;
96          term_a.textContent = response.search_term;
97
98          term_li.appendChild(term_span);
99          term_li.appendChild(term_br);
100          term_li.appendChild(term_a);
101          searchBox.appendChild(term_li);
102

103          triggerFormActions(searchBox);
104        }
105      }
106    };
107
108    xhttp.open('GET', `${ajaxUrl}?action=ob-adv-search&nonce=${nonce}&search=${value}`);
109    xhttp.send();
110  };
111
112  const returnedFunction = debounce(function (e) {
113    const searchTerm = e.target.value;
114    const keywordsList = document.querySelector('.results-fake');
115    if (searchTerm.length > 2) {
116      triggerAjaxSearch(searchTerm);
117      keywordsList.classList.add('search-active');
118    } else {
119      const searchBox = document.querySelector('.search-input-fields__predictive');
120      searchBox.classList.remove('is-active');
121      searchBox.innerHTML = '';
122      keywordsList.classList.remove('search-active');
123    }
124  }, 300);
125
126  document.addEventListener('DOMContentLoaded', function () {
127    const searchInput = document.querySelector('#search');
128
129    if (searchInput) {
130      searchInput.addEventListener('input', returnedFunction);
131    }
132  });
133})();
134