popup menu graphics fixed. see #130

This commit is contained in:
mic 2024-09-22 21:55:55 +02:00
parent f4d51a9540
commit c9bd836af2
3 changed files with 12 additions and 2 deletions

View file

@ -11,11 +11,12 @@ body {
width: fit-content;
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 10em;
max-height: 12em;
max-height: 13em;
min-height: 1em;
padding: 0;
}
@ -29,9 +30,13 @@ body {
z-index: 1001;
font-size: 13px;
}
._spacer_div{
width: 100%;
height: 2.1em;
}
#mzta_autocomplete-items {
margin-top: 1.5em;
border: none;
z-index: 1000;
background-color: #FAFAFA;

View file

@ -9,6 +9,7 @@
<body>
<div id="mzta_search_banner">
<div class="_spacer_div">&nbsp;</div>
<input type="text" id="mzta_search_input" placeholder="__MSG_SearchPrompt__">
<div id="mzta_autocomplete-items" style="display: none;"></div>
</div>

View file

@ -36,6 +36,7 @@ async function searchPrompt(allPrompts, tabId, tabType){
let input = document.getElementById('mzta_search_input');
let autocompleteList = document.getElementById('mzta_autocomplete-items');
let _spacer_div = document.getElementById('_spacer_div');
let banner = document.getElementById('mzta_search_banner');
// Initialize variables to track focus and selection
@ -66,6 +67,7 @@ async function searchPrompt(allPrompts, tabId, tabType){
if (filteredData.length === 0) {
autocompleteList.style.display = 'none';
_spacer_div.style.display = 'none';
return;
}
@ -95,12 +97,14 @@ async function searchPrompt(allPrompts, tabId, tabType){
selectedId = item.id; // Store the selected item's ID
console.log('>>>>>>>>>>>>> mousedown selectedId:', selectedId);
autocompleteList.style.display = 'none';
_spacer_div.style.display = 'none';
});
autocompleteList.appendChild(itemDiv);
});
autocompleteList.style.display = 'block';
_spacer_div.style.display = 'block';
});
// Add a keydown event listener to handle arrow navigation and selection