下面是详细的攻略过程：

UI组件之Input多选下拉实现方法（带有搜索功能）

在前端开发中，多选下拉框是十分常见的一种UI组件。那么如何实现这样一个组件呢？接下来我们将使用HTML、CSS和JavaScript来实现一个具有搜索的多选下拉框。

1. HTML结构

首先，在HTML中，我们需要一个输入框和一个下拉框。下拉框中可以用列表展示选项。基本的HTML结构如下所示：

<div class="dropdown">
  <input type="text" class="dropdown-input" placeholder="请选择...">
  <ul class="dropdown-menu">
    <li><input type="checkbox" value="1">选项一</li>
    <li><input type="checkbox" value="2">选项二</li>
    <li><input type="checkbox" value="3">选项三</li>
    ...
  </ul>
</div>

2. CSS样式

为了美化UI，需要对下拉框进行样式设置。同时我们还要设置文字的显示长度、剩余文字省略号显示。CSS样式如下所示：

.dropdown {
  position: relative;
}

.dropdown .dropdown-input {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9;
  min-width: 200px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.dropdown .dropdown-menu li {
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.dropdown .dropdown-menu li:hover {
  background-color: #f1f1f1;
}

.dropdown .dropdown-menu li input[type="checkbox"] {
  margin-right: 5px;
}

3. JavaScript代码实现

在JavaScript中，我们需要实现点击下拉框展开、收起，选项的选择和取消选择等功能。同时，还需要实现搜索功能，在输入框中输入文字时，动态过滤下拉框中的选项。

示例1：基本实现多选下拉框（没有搜索功能）

// 获取所有复选框元素
var checkboxes = document.querySelectorAll('.dropdown-menu input[type="checkbox"]');

// 下拉框元素
var dropdown = document.querySelector('.dropdown');
var menu = dropdown.querySelector('.dropdown-menu');
var input = dropdown.querySelector('.dropdown-input');

// 给下拉框元素添加点击事件
dropdown.addEventListener('click', function(e) {
  // 如果当前点击的区域是下拉框输入框或者下拉框内的元素，则不处理
  if (input.contains(e.target) || menu.contains(e.target)) {
    return;
  }
  // 隐藏下拉框
  menu.style.display = 'none';
});

// 给下拉框输入框添加点击事件
input.addEventListener('click', function(e) {
  // 显示下拉框
  menu.style.display = 'block';
  e.stopPropagation();
});

// 给下拉框中的每个复选框添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('click', function(e) {
    e.stopPropagation();
  });
}

// 监听所有复选框的状态改变，更新下拉框输入框中的文本内容
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function(e) {
    var checkedArr = [];
    for (var j = 0; j < checkboxes.length; j++) {
      if (checkboxes[j].checked) {
        checkedArr.push(checkboxes[j].parentNode.innerText.trim());
      }
    }
    input.value = '';
    if (checkedArr.length) {
      input.value = checkedArr.join(', ');
    } else {
      input.placeholder = '请选择...';
    }
  });
}

示例2：实现多选下拉框（带有搜索功能）

// 获取所有复选框元素
var checkboxes = document.querySelectorAll('.dropdown-menu input[type="checkbox"]');

// 下拉框元素
var dropdown = document.querySelector('.dropdown');
var menu = dropdown.querySelector('.dropdown-menu');
var input = dropdown.querySelector('.dropdown-input');

// 给下拉框元素添加点击事件
dropdown.addEventListener('click', function(e) {
  // 如果当前点击的区域是下拉框输入框或者下拉框内的元素，则不处理
  if (input.contains(e.target) || menu.contains(e.target)) {
    return;
  }
  // 隐藏下拉框
  menu.style.display = 'none';
});

// 给下拉框输入框添加点击事件
input.addEventListener('click', function(e) {
  // 显示下拉框
  menu.style.display = 'block';
  e.stopPropagation();
});

// 给下拉框输入框添加键盘输入事件
input.addEventListener('input', function(e) {
  var searchText = input.value.trim().toLowerCase();
  for (var i = 0; i < checkboxes.length; i++) {
    // 如果搜索框中的文字为空，则显示所有选项
    if (!searchText) {
      checkboxes[i].parentNode.style.display = 'block';
    } else {
      // 否则根据搜索框中的文字动态匹配选项，并显示对应选项
      var text = checkboxes[i].parentNode.innerText.trim().toLowerCase();
      if (text.indexOf(searchText) < 0) {
        checkboxes[i].parentNode.style.display = 'none';
      } else {
        checkboxes[i].parentNode.style.display = 'block';
      }
    }
  }
});

// 给下拉框中的每个复选框添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('click', function(e) {
    e.stopPropagation();
  });
}

// 监听所有复选框的状态改变，更新下拉框输入框中的文本内容
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function(e) {
    var checkedArr = [];
    for (var j = 0; j < checkboxes.length; j++) {
      if (checkboxes[j].checked) {
        checkedArr.push(checkboxes[j].parentNode.innerText.trim());
      }
    }
    input.value = '';
    if (checkedArr.length) {
      input.value = checkedArr.join(', ');
    } else {
      input.placeholder = '请选择...';
    }
  });
}

通过以上的代码实现，我们可以完成一个基本的多选下拉框，并且还可以添加搜索功能，可以方便地筛选选项，提高UI的灵活性和用户体验。