带有模糊匹配功能的下拉列表，点击下拉框后下拉框变为输入框，选择后恢复，默认值未选择，html，css，js

实现这个功能需要使用HTML、CSS和JavaScript。以下是一个基本的实现思路：

1. 创建一个下拉框元素，包含所有选项。
2. 使用CSS将下拉框的样式设置为隐藏，同时设置一个样式将下拉框的选项以列表形式展示。
3. 使用JavaScript监听下拉框的点击事件，当点击时将下拉框的样式设置为展示，并将其选项列表展示出来。
4. 将下拉框的选项列表中的每一项都添加一个点击事件监听器，在点击时将其文本内容填充到输入框中，并将下拉框的样式设置为隐藏。

以下是一个简单的实现示例代码：

HTML代码：

<div class="dropdown">
  <select id="select">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
  </select>
  <input id="input" type="text" placeholder="请选择">
  <ul id="list" class="hide">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
  </ul>
</div>

CSS代码：

.dropdown {
  position: relative;
  width: 200px;
}

#select {
  display: none;
}

#list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  list-style: none;
}

#list li {
  padding: 5px;
  cursor: pointer;
}

.hide {
  display: none;
}

JavaScript代码：

var select = document.getElementById("select");
var input = document.getElementById("input");
var list = document.getElementById("list");

// 显示下拉框
input.addEventListener("click", function() {
  list.classList.remove("hide");
});

// 填充输入框
list.addEventListener("click", function(event) {
  var target = event.target;
  if (target.tagName === "LI") {
    input.value = target.innerText;
    select.value = target.innerText;
    list.classList.add("hide");
  }
});

// 模糊匹配
input.addEventListener("input", function() {
  var value = input.value;
  var options = Array.from(list.children);
  options.forEach(function(option) {
    var text = option.innerText;
    if (text.indexOf(value) !== -1) {
      option.classList.remove("hide");
    } else {
      option.classList.add("hide");
    }
  });
});

以上代码实现了一个带有模糊匹配功能的下拉列表，点击下拉框后下拉框变为输入框，选择后恢复，默认值未选择，你可以根据需要进行修改和调整。