Question

我们知道在线“ https://www.cssscript.com/demo/multiple-select-enhancement-select7/”中有CSS脚本Select7下拉列表工具，只是想知道如何在该下拉列表中添加搜索功能。 HTML，CSS，JS的编码如下

function remove_selected_item(elem, e) {
  e.stopPropagation();
  var option_text = elem.parentElement.querySelector('.select7_content').innerHTML;
  var option_value = elem.parentElement.querySelector('.select7_content').dataset.optionValue;
  var selector = elem.parentElement.parentElement.parentElement.querySelector('.select7_select');

  selector.innerHTML += `<option value="${ option_value }">${ option_text }</option>`;

  if (selector.length > 1)
    selector.style.display = 'block';

  var selected_items = elem.parentElement.parentElement.parentElement.querySelectorAll('.select7_item');
  if (selected_items.length == 1) {
    var placeholder = elem.parentElement.parentElement.parentElement.querySelector('.select7_placeholder');
    placeholder.style.display = 'block';
  }

  elem.parentElement.remove();
}

function add_selected_item(elem, e) {
  e.stopPropagation();
  var option_text = elem[elem.selectedIndex].text;
  var option_value = elem[elem.selectedIndex].value;
  var selected_items = elem.parentElement.querySelector('.select7_items');
  var placeholder = elem.parentElement.querySelector('.select7_placeholder');

  placeholder.style.display = 'none';

  selected_items.innerHTML += `
        <div class="select7_item">
            <div data-option-value="${option_value}" class="select7_content">${option_text}</div>
            <div class="select7_del" onclick="remove_selected_item(this, event);">&#10006;</div>
        </div>`;


  elem[elem.selectedIndex].remove();
  if (elem.length == 1)
    elem.style.display = 'none';
}

.select7_container {
  box-sizing: border-box;
  position: relative;
  background-color: rgba(0, 0, 0, .8);
  padding: 5px 5px 0 5px;
  padding-right: 30px;
  border-radius: 5px;
  overflow: hidden;
  color: rgb(255, 255, 255);
  width: 100%;
  min-height: 30px;
  user-select: none;
}

.select7_placeholder {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.445);
  font-size: 14px;
  position: absolute;
  top: 45%;
  left: 6px;
  transform: translateY(-50%);
}

.select7_arrow {
  position: absolute;
  right: 10px;
  vertical-align: middle;
  font-size: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.select7_item {
  position: relative;
  z-index: 1;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(0, 0, 0, .9);
  padding: 2px 4px;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  user-select: none;
  margin-bottom: 5px;
  max-width: 99%;
}

.select7_content {
  padding-right: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select7_select {
  position: absolute;
  background: rgba(0, 0, 0, 0.486);
  color: rgba(255, 255, 255, 0);
  border: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 5px;
}

.select7_select>option {
  background: rgba(0, 0, 0, 0.486);
  color: rgb(255, 255, 255);
  font-size: 15px;
  /* font-weight: bold; */
  /* add this for bold options */
}

.select7_del {
  position: absolute;
  top: 2px;
  right: 3px;
}

.select7_del:hover {
  cursor: pointer;
}

.select7_item:hover {
  background-color: rgba(255, 255, 255, 0.603);
}

.select7_hide {
  display: none;
}

<html>
<title>Select7 Demo</title>

<body>
  <div class="container">
    <h1>Select7 Demo</h1>
    <div id="select7" class="select7_container">
      <div class="select7_arrow">▾</div>
      <div class="select7_placeholder">Meme Review</div>
      <select class="select7_select" onchange="add_selected_item(this, event);">
        <option class="select7_hide" value="filler"></option>
        <option value="option1">CSS</option>
        <option value="option2">SCRIPT</option>
        <option value="option3">.NET</option>
        <option value="option4">Hello World</option>
        <option value="option5">Yes Mate</option>
        <option value="option6">Ma Dude</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
      <div class="select7_items"></div>
    </div>
  </div>
</body>

</html>

只想知道我们如何在此基础上构建搜索功能，以基于选择文本搜索下拉列表？

如何在下拉列表中添加搜索功能

0 个答案: