5 801
edições
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.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); | ||