tranchausky · July 24, 2024 04:16
diff --git a/input-suggest.html b/input-suggest.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Suggestions with Keyboard Navigation</title>
    <style>
        /* Basic styling for suggestions */
        .suggestions-container {
            border: 1px solid #ccc;
            max-height: 150px;
            overflow-y: auto;
            display: none;
            position: absolute;
            background-color: white;
            width: 200px;
        }
        .suggestion-item {
            padding: 10px;
            cursor: pointer;
        }
        .suggestion-item:hover,
        .suggestion-item.active {
            background-color: #e9e9e9;
        }
    </style>
 </head>
 <body>
    <input type="text" id="searchInput" placeholder="Type something..." />
    <div id="suggestions" class="suggestions-container"></div>

    <script>
        const suggestions = [
            'apple',
            'banana',
            'grape',
            'orange',
            'strawberry',
            'watermelon',
            'blueberry',
            'cherry',
            'pineapple',
            'mango'
        ];

        const searchInput = document.getElementById('searchInput');
        const suggestionsContainer = document.getElementById('suggestions');
        let currentFocus = -1;

        searchInput.addEventListener('input', function() {
            const inputValue = searchInput.value.toLowerCase();
            suggestionsContainer.innerHTML = '';
            currentFocus = -1;
            if (inputValue) {
                const filteredSuggestions = suggestions.filter(suggestion =>
                    suggestion.toLowerCase().includes(inputValue)
                );
                if (filteredSuggestions.length > 0) {
                    suggestionsContainer.style.display = 'block';
                    filteredSuggestions.forEach((suggestion, index) => {
                        const suggestionItem = document.createElement('div');
                        suggestionItem.classList.add('suggestion-item');
                        suggestionItem.textContent = suggestion;
                        suggestionItem.addEventListener('click', function() {
                            searchInput.value = suggestion;
                            suggestionsContainer.innerHTML = '';
                            suggestionsContainer.style.display = 'none';
                        });
                        suggestionsContainer.appendChild(suggestionItem);
                    });
                } else {
                    suggestionsContainer.style.display = 'none';
                }
            } else {
                suggestionsContainer.style.display = 'none';
            }
        });

        searchInput.addEventListener('keydown', function(event) {
            const items = document.querySelectorAll('.suggestion-item');
            if (event.key === 'ArrowDown') {
                currentFocus++;
                if (currentFocus >= items.length) currentFocus = 0;
                setActive(items);
            } else if (event.key === 'ArrowUp') {
                currentFocus--;
                if (currentFocus < 0) currentFocus = items.length - 1;
                setActive(items);
            } else if (event.key === 'Enter') {
                if (currentFocus > -1) {
                    event.preventDefault();
                    items[currentFocus].click();
                }
            }
        });

        function setActive(items) {
            if (!items) return false;
            removeActive(items);
            if (currentFocus >= items.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = items.length - 1;
            items[currentFocus].classList.add('active');
            items[currentFocus].scrollIntoView({block: "nearest"});
        }

        function removeActive(items) {
            for (let i = 0; i < items.length; i++) {
                items[i].classList.remove('active');
            }
        }

        document.addEventListener('click', function(event) {
            if (event.target !== searchInput) {
                suggestionsContainer.style.display = 'none';
            }
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Input Suggestions with Keyboard Navigation</title>
	<style>
	/* Basic styling for suggestions */
	.suggestions-container {
	border: 1px solid #ccc;
	max-height: 150px;
	overflow-y: auto;
	display: none;
	position: absolute;
	background-color: white;
	width: 200px;
	}
	.suggestion-item {
	padding: 10px;
	cursor: pointer;
	}
	.suggestion-item:hover,
	.suggestion-item.active {
	background-color: #e9e9e9;
	}
	</style>
	</head>
	<body>
	<input type="text" id="searchInput" placeholder="Type something..." />
	<div id="suggestions" class="suggestions-container"></div>

	<script>
	const suggestions = [
	'apple',
	'banana',
	'grape',
	'orange',
	'strawberry',
	'watermelon',
	'blueberry',
	'cherry',
	'pineapple',
	'mango'
	];

	const searchInput = document.getElementById('searchInput');
	const suggestionsContainer = document.getElementById('suggestions');
	let currentFocus = -1;

	searchInput.addEventListener('input', function() {
	const inputValue = searchInput.value.toLowerCase();
	suggestionsContainer.innerHTML = '';
	currentFocus = -1;
	if (inputValue) {
	const filteredSuggestions = suggestions.filter(suggestion =>
	suggestion.toLowerCase().includes(inputValue)
	);
	if (filteredSuggestions.length > 0) {
	suggestionsContainer.style.display = 'block';
	filteredSuggestions.forEach((suggestion, index) => {
	const suggestionItem = document.createElement('div');
	suggestionItem.classList.add('suggestion-item');
	suggestionItem.textContent = suggestion;
	suggestionItem.addEventListener('click', function() {
	searchInput.value = suggestion;
	suggestionsContainer.innerHTML = '';
	suggestionsContainer.style.display = 'none';
	});
	suggestionsContainer.appendChild(suggestionItem);
	});
	} else {
	suggestionsContainer.style.display = 'none';
	}
	} else {
	suggestionsContainer.style.display = 'none';
	}
	});

	searchInput.addEventListener('keydown', function(event) {
	const items = document.querySelectorAll('.suggestion-item');
	if (event.key === 'ArrowDown') {
	currentFocus++;
	if (currentFocus >= items.length) currentFocus = 0;
	setActive(items);
	} else if (event.key === 'ArrowUp') {
	currentFocus--;
	if (currentFocus < 0) currentFocus = items.length - 1;
	setActive(items);
	} else if (event.key === 'Enter') {
	if (currentFocus > -1) {
	event.preventDefault();
	items[currentFocus].click();
	}
	}
	});

	function setActive(items) {
	if (!items) return false;
	removeActive(items);
	if (currentFocus >= items.length) currentFocus = 0;
	if (currentFocus < 0) currentFocus = items.length - 1;
	items[currentFocus].classList.add('active');
	items[currentFocus].scrollIntoView({block: "nearest"});
	}

	function removeActive(items) {
	for (let i = 0; i < items.length; i++) {
	items[i].classList.remove('active');
	}
	}

	document.addEventListener('click', function(event) {
	if (event.target !== searchInput) {
	suggestionsContainer.style.display = 'none';
	}
	});
	</script>
	</body>
	</html>