如何禁用搜索输入框中已选中的下拉列表项？（点击触发、无提交按钮）

没问题，我来帮你搞定这个需求！咱们一步步来实现，核心思路是跟踪已选中的列表项，在点击搜索框时同步这些项的禁用状态，同时处理数据加载和选中状态的交互：

1. 先搞定JSON数据加载与下拉列表渲染 #

首先我们需要加载JSON数据，把药品选项渲染到下拉列表里，同时用一个集合来记录已选中的药品ID（方便快速查找）。假设你的JSON文件名为medicines.json，结构类似[{"id": 1, "name": "阿司匹林"}, {"id": 2, "name": "布洛芬"}...]：

// 用Set存储已选中的药品ID，自动去重且查找高效
let selectedMedicines = new Set();
// 存储药品ID和对象的映射，方便后续快速获取药品信息
let medicineMap = new Map();

// 加载JSON数据并渲染下拉列表
async function loadMedicines() {
  try {
    const response = await fetch('medicines.json');
    const medicines = await response.json();
    const dropdown = document.getElementById('li-psearch');
    
    // 清空下拉列表，保留分隔线
    dropdown.innerHTML = '<li role="presentation" class="divider-search"></li>';
    
    medicines.forEach(medicine => {
      medicineMap.set(medicine.id, medicine);
      const li = document.createElement('li');
      li.setAttribute('role', 'presentation');
      li.dataset.id = medicine.id;
      li.innerHTML = `<a role="menuitem" tabindex="-1" href="#">${medicine.name}</a>`;
      
      // 点击下拉项时切换选中状态
      li.addEventListener('click', () => {
        if (selectedMedicines.has(medicine.id)) {
          // 取消选中
          selectedMedicines.delete(medicine.id);
          li.classList.remove('disabled');
        } else {
          // 标记为选中
          selectedMedicines.add(medicine.id);
          li.classList.add('disabled');
        }
        // 更新右侧的已选结果列表
        updateResultList();
      });
      
      dropdown.appendChild(li);
    });
  } catch (error) {
    console.error('加载药品数据失败:', error);
  }
}

// 更新已选结果列表（把选中的药品显示出来，支持移除）
function updateResultList() {
  const resultList = document.getElementById('result');
  resultList.innerHTML = '';
  
  selectedMedicines.forEach(id => {
    const medicine = medicineMap.get(id);
    const li = document.createElement('li');
    li.className = 'list-group-item';
    li.textContent = medicine.name;
    
    // 添加移除按钮，点击后取消选中
    const removeBtn = document.createElement('button');
    removeBtn.className = 'btn btn-sm btn-danger float-right';
    removeBtn.textContent = '移除';
    removeBtn.addEventListener('click', () => {
      selectedMedicines.delete(id);
      // 同步更新下拉列表的禁用状态
      const dropdownItem = document.querySelector(`#li-psearch li[data-id="${id}"]`);
      if (dropdownItem) dropdownItem.classList.remove('disabled');
      updateResultList();
    });
    
    li.appendChild(removeBtn);
    resultList.appendChild(li);
  });
}

2. 点击搜索框时禁用已选中项 #

接下来给搜索输入框绑定点击事件，每次点击时遍历下拉列表，把已选中的项设置为禁用状态（视觉上灰掉，且无法点击）：

// 监听搜索框的点击事件，同步已选中项的禁用状态
document.getElementById('medicineSearchBar').addEventListener('click', () => {
  const dropdownItems = document.querySelectorAll('#li-psearch li:not(.divider-search)');
  dropdownItems.forEach(item => {
    const medicineId = parseInt(item.dataset.id);
    if (selectedMedicines.has(medicineId)) {
      // 标记为禁用
      item.classList.add('disabled');
      item.style.pointerEvents = 'none'; // 阻止点击
      item.style.opacity = '0.6'; // 视觉上灰化
    } else {
      // 恢复可用状态
      item.classList.remove('disabled');
      item.style.pointerEvents = 'auto';
      item.style.opacity = '1';
    }
  });
});

3. 页面初始化 #

最后在页面加载完成时调用数据加载函数，启动整个流程：

// 页面DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', loadMedicines);

补充样式（可选） #

你可以给禁用状态的列表项加个CSS样式，让视觉效果更明显：

#li-psearch li.disabled {
  cursor: not-allowed;
}
#li-psearch li.disabled a {
  color: #6c757d;
}

这样就完成啦！每次点击搜索框时，已选中的下拉项都会自动变成禁用状态，无法重复选择，同时已选列表支持移除操作，状态会自动同步。

内容的提问来源于stack exchange，提问作者Neetu Yadav