https://www.standaarduitgeverij.be/wp-content/themes/sube/js/su-typeahead.js?ver=1.2

1(function ($) {
2  var $input = $('[data-su-search]');       // geef je search input dit attribuut
3  var $box   = $('<div class="su-typeahead"></div>').insertAfter($input);
4  var pendingXhr = null;
5  var debounceTimer = null;
6
7  console.log('su-typeahead loaded');
8
9  function render(results, q) {
10    if (!results || !results.length) {
11      $box.empty().hide();
12      return;
13    }
14    // Opmaak: 
15    // - <span>xyz</span> in boeken (10)
16    
17    console.log('render', results, q);
18    var html = '<ul class="su-typeahead-list" role="listbox">';
19    results.forEach(function (r) {
20    var url = SU_Ajax.searchBase + '?' + SU_Ajax.param + '=' + encodeURIComponent(q);
21    if (r.pt) url += '&pt=' + encodeURIComponent(r.pt); // << add pt param
22    html += '<li class="su-typeahead-item" role="option"><a href="'+url+'"><span>'+escapeHtml(q)+'</span> in '+r.label+' ('+r.count+')</a></li>';
23    });
24    html += '</ul>';
25
26    $box.html(html).show();
27  }
28
29  function escapeHtml(s) {
30    return s.replace(/[&<>"']/g, function (c) {
31      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
32    });
33  }
34
35  function fetchSuggestions(q) {
36    pendingXhr = $.ajax({
37        url: '/su-ta.php',
38        data: { q: q },
39        dataType: 'json'
40        }).done(function (res) {
41        // support both /su-ta.php and admin-ajax shapes
42        var results = res.results || (res.data && res.data.results) || [];
43        var query   = res.query   || (res.data && res.data.query)   || '';
44        render(results, query);
45        console.log('typeahead AJAX done', res);
46        }).fail(function (xhr, status, err) {
47        console.error('typeahead AJAX failed', status, err, xhr && xhr.responseText);
48        $box.empty().hide();
49        });
50  }
51
52  $input.on('input', function () {
53    var q = $(this).val().trim();
54    if (q.length < (SU_Ajax.minChars || 2)) {
55      $box.empty().hide();
56      return;
57    }
58    clearTimeout(debounceTimer);
59    debounceTimer = setTimeout(function () {
60      fetchSuggestions(q);
61    }, 200); // debounce 200ms
62  });
63
64  // Verbergen wanneer je buiten klikt / esc
65  $(document).on('click', function (e) {
66    if (!$(e.target).closest('.su-typeahead, [data-su-search]').length) {
67      $box.empty().hide();
68    }
69  });
70  $input.on('keydown', function (e) {
71    if (e.key === 'Escape') { $box.empty().hide(); }
72  });
73
74})(jQuery);