当前位置：首页 > JavaScript

js实现lookupedit

2026-02-02 07:05:56JavaScript

实现 LookupEdit 功能

LookupEdit 是一种常见的用户界面控件，允许用户通过输入部分信息后从下拉列表中选择匹配项。以下是使用 JavaScript 实现基本 LookupEdit 功能的几种方法：

使用原生 JavaScript 实现

创建基本的 HTML 结构和 JavaScript 逻辑：

<div class="lookup-container">
  <input type="text" id="lookupInput" placeholder="输入搜索内容">
  <div id="dropdown" class="dropdown-content"></div>
</div>

const input = document.getElementById('lookupInput');
const dropdown = document.getElementById('dropdown');

// 模拟数据源
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

input.addEventListener('input', function() {
  const inputValue = this.value.toLowerCase();
  dropdown.innerHTML = '';

  if (inputValue.length > 0) {
    const filteredData = data.filter(item => 
      item.toLowerCase().includes(inputValue)
    );

    filteredData.forEach(item => {
      const option = document.createElement('div');
      option.textContent = item;
      option.addEventListener('click', function() {
        input.value = item;
        dropdown.innerHTML = '';
      });
      dropdown.appendChild(option);
    });

    dropdown.style.display = 'block';
  } else {
    dropdown.style.display = 'none';
  }
});

// 点击其他地方关闭下拉框
document.addEventListener('click', function(event) {
  if (event.target !== input) {
    dropdown.style.display = 'none';
  }
});

使用 jQuery 实现

如果项目中已使用 jQuery，可以简化实现：

$(document).ready(function() {
  const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  $('#lookupInput').on('input', function() {
    const inputValue = $(this).val().toLowerCase();
    $('#dropdown').empty();

    if (inputValue.length > 0) {
      const filteredData = data.filter(item => 
        item.toLowerCase().includes(inputValue)
      );

      filteredData.forEach(item => {
        $('#dropdown').append(
          $('<div>').text(item).click(function() {
            $('#lookupInput').val(item);
            $('#dropdown').hide();
          })
        );
      });

      $('#dropdown').show();
    } else {
      $('#dropdown').hide();
    }
  });

  $(document).click(function(event) {
    if (!$(event.target).closest('.lookup-container').length) {
      $('#dropdown').hide();
    }
  });
});

使用现有库实现

对于更复杂的需求，可以考虑使用现有库：

DevExtreme Lookup
Kendo UI ComboBox
Select2

以 Select2 为例：

$('#lookupInput').select2({
  data: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
  minimumInputLength: 1,
  placeholder: '输入搜索内容',
  allowClear: true
});

样式增强

添加基本 CSS 使控件更美观：

.lookup-container {
  position: relative;
  width: 300px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content div {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.dropdown-content div:hover {
  background-color: #f1f1f1
}