如何在输入文本框中禁用已选择的搜索栏列表

Question

这是我的HTML：

<div class="container">
  <div class="card">
    <div class="col-md-12" style="padding-top: 10px;padding-bottom: 10px;">
      <div class="form-group">
        <input type="text" id="medicineSearchBar" class="form-control" placeholder="Search...">
      </div>
      <ul class="list-group" id="result"></ul>
      <ul style="width:100%; max-height:300px; overflow-y: scroll;" id="li-psearch" class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation" class="divider-search"></li>
      </ul>
    </div>
  </div>
</div>

如何在输入文本框中禁用已选择的搜索栏列表？我没有使用任何提交按钮，我应该点击搜索栏文本输入。

数据来自JSON文件。

Answer 1

1，在你的css中创建一个禁用类：

.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}

2，为你的li制作jquery监听器事件：

$(".card").on("click", "li.divider-search", function(){
$(this).addClass("disabled");
});