Widget:Test: mudanças entre as edições

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 6: Linha 6:
     <title>Busca de Imagens por Nome</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
         .input-group { margin-bottom: 1em; }
         .input-group { margin-bottom: 1em; position: relative; }
         .dropdown {
         .dropdown {
             border: 1px solid #ccc;
             border: 1px solid #ccc;
Linha 15: Linha 15:
             max-height: 150px;
             max-height: 150px;
             overflow-y: auto;
             overflow-y: auto;
            width: 100%;
         }
         }
         .dropdown-item {
         .dropdown-item {
             padding: 8px;
             padding: 8px;
             cursor: pointer;
             cursor: pointer;
            display: flex;
            align-items: center;
        }
        .dropdown-item img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
         }
         }
         .dropdown-item:hover {
         .dropdown-item:hover {
Linha 68: Linha 76:
                     if (imageName.toLowerCase().includes(searchValue)) {
                     if (imageName.toLowerCase().includes(searchValue)) {
                         const dropdownItem = document.createElement('div');
                         const dropdownItem = document.createElement('div');
                        dropdownItem.textContent = imageName;
                         dropdownItem.classList.add('dropdown-item');
                         dropdownItem.classList.add('dropdown-item');
                       
                        const imgElement = document.createElement('img');
                        imgElement.src = imageList[imageName].imageUrl;
                        imgElement.alt = imageName;
                       
                        dropdownItem.appendChild(imgElement);
                        dropdownItem.appendChild(document.createTextNode(imageName));
                       
                         dropdownItem.addEventListener('click', function() {
                         dropdownItem.addEventListener('click', function() {
                             showImageInfo(imageName);
                             showImageInfo(imageName);
5 667

edições

Menu de navegação