js实现lookupedit
实现 LookupEdit 功能
LookupEdit 是一种常见的用户界面控件，允许用户在输入时从下拉列表中选择值。以下是使用 JavaScript 和 HTML 实现 LookupEdit 的方法。
HTML 结构
创建一个基本的 HTML 结构，包含输入框和下拉列表。
<div class="lookup-edit-container">
<input type="text" id="lookupInput" placeholder="Type to search...">
<div id="dropdownList" class="dropdown-list"></div>
</div>CSS 样式
为输入框和下拉列表添加样式，确保下拉列表在输入框下方显示。
.lookup-edit-container {
position: relative;
width: 300px;
}
#lookupInput {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.dropdown-list {
position: absolute;
width: 100%;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
background: white;
display: none;
}
.dropdown-list div {
padding: 8px;
cursor: pointer;
}
.dropdown-list div:hover {
background-color: #f0f0f0;
}JavaScript 实现
使用 JavaScript 实现 LookupEdit 的核心功能，包括输入监听、下拉列表显示和选择功能。
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('lookupInput');
const dropdown = document.getElementById('dropdownList');
// 模拟数据源
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
// 输入事件监听
input.addEventListener('input', function() {
const inputText = input.value.toLowerCase();
const filteredData = data.filter(item =>
item.toLowerCase().includes(inputText)
);
updateDropdown(filteredData);
});
// 更新下拉列表
function updateDropdown(items) {
dropdown.innerHTML = '';
if (items.length === 0) {
dropdown.style.display = 'none';
return;
}
items.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
div.addEventListener('click', function() {
input.value = item;
dropdown.style.display = 'none';
});
dropdown.appendChild(div);
});
dropdown.style.display = 'block';
}
// 点击外部关闭下拉列表
document.addEventListener('click', function(event) {
if (!input.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.style.display = 'none';
}
});
});功能扩展
如果需要从服务器动态加载数据，可以使用 fetch API 或类似方法。
input.addEventListener('input', async function() {
const inputText = input.value;
const response = await fetch(`/api/search?q=${encodeURIComponent(inputText)}`);
const data = await response.json();
updateDropdown(data);
});键盘导航
为提升用户体验，可以添加键盘导航功能。
input.addEventListener('keydown', function(event) {
const items = dropdown.querySelectorAll('div');
if (!items.length) return;
let currentIndex = -1;
items.forEach((item, index) => {
if (item.classList.contains('active')) {
currentIndex = index;
item.classList.remove('active');
}
});
if (event.key === 'ArrowDown') {
event.preventDefault();
currentIndex = (currentIndex + 1) % items.length;
} else if (event.key === 'ArrowUp') {
event.preventDefault();
currentIndex = (currentIndex - 1 + items.length) % items.length;
} else if (event.key === 'Enter' && currentIndex >= 0) {
event.preventDefault();
input.value = items[currentIndex].textContent;
dropdown.style.display = 'none';
return;
}
if (currentIndex >= 0) {
items[currentIndex].classList.add('active');
}
});以上代码实现了一个基本的 LookupEdit 控件，可以根据实际需求进一步扩展功能。
