https://www.univates.br/files-bravo/portal-bravo/js/home.js

1const getResultContainer      = ()     => $('#course-search-results').first();
2const activeResultContainer   = ()     => getResultContainer().addClass('ativo');
3const inactiveResultContainer = ()     => getResultContainer().removeClass('ativo');
4const clearResultContainer    = ()     => getResultContainer().empty();
5const addItemResultContainer  = (item) => getResultContainer().append(item);
6
7const courseSearch = (search, url = "") => {
8    if(search.length == 0) {
9        inactiveResultContainer();
10        clearResultContainer();
11        return;
12    }
13
14    activeResultContainer();
15
16    if(search.length < 3) {
17        clearResultContainer();
18        addItemResultContainer('<a href="#" class="resultado-item"> <h3>Digite pelo menos 3 caracteres para sua busca.</h3> </a>')
19        return;
20    }
21
22    $.ajax({
23        url: url,
24        type: 'GET',
25        dataType: 'json',
26        data: {
27            'frase': search,
28            'cursos': true,
29        },
30        beforeSend: function() {
31            debounce(() => {
32                clearResultContainer();
33                addItemResultContainer('<a href="#" class="resultado-item"> <h3>Carregando ...</h3> </a>');
34            }, 200);
35        },
36        complete: function(result) {
37            clearResultContainer();
38
39            if(result.responseJSON.cursos.length < 1) {
40                addItemResultContainer('<a href="#" class="resultado-item"> <h3>Nenhum curso encontrado :(</h3> </a>');
41                return;
42            }
43
44            const courses = result.responseJSON.cursos.slice(0, 3);
45
46            courses.forEach(course => {
47                addItemResultContainer(
48                    `<a href="${course.url}" class="resultado-item"> 
49                        <h3>${course.nome} <span>${course.tipo}</span></h3>
50                        ${
51                            course.modalidade == 'A Distância' || course.aula_mais == 't' 
52                                ? '<h4> '+ course.aula_mais == 't' ? 'aula+' : 'EAD' +' </h4>'
53                                : ''
54                        }
55                    </a>`
56                );
57            });
58
59        }
60    });
61}
62
63$(document).ready(() => {
64    // Course search
65    const courseInput = $('#input-course');
66    courseInput.on('keyup', debounce(() => courseSearch(courseInput.val(), courseInput.parent().attr('action')), 200))
67
68    // Clear search input and results on click outside
69    window.addEventListener('click', function(e) {
70        if(!this.document.getElementById('course-search').contains(e.target)) {
71            courseInput.val('');
72            inactiveResultContainer();
73        }
74    })
75})