纯js代码生成可搜索选择下拉列表的实例

生成可搜索选择下拉列表的实例，首先需要编写一个基本的HTML结构：

<input type="text" id="searchBox" placeholder="搜索...">
<select id="selectBox"></select>

其中，id为searchBox的input元素是搜索框，用户可在此输入关键词进行筛选，id为selectBox的select元素则是下拉列表。

接下来，我们需要编写一段JavaScript代码来实现下拉列表的生成和筛选功能。

首先，在页面加载完成后，我们需要为搜索框添加一个keyup事件监听器，当用户输入或删除关键字时，我们需要动态过滤下拉列表中的所有选项，并实时更新下拉列表。

window.onload = function() {
  var searchBox = document.getElementById("searchBox");
  var selectBox = document.getElementById("selectBox");
  var options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", "Fig", "Grape", "Honeydew"];

  searchBox.addEventListener("keyup", function() {
    var keyword = searchBox.value.trim();
    var filteredOptions = options.filter(function(option) {
      return option.toLowerCase().includes(keyword.toLowerCase());
    });
    renderOptions(filteredOptions);
  });
}

在事件监听器中，我们首先获取搜索框和下拉列表的DOM元素，并定义一个数组options来存储所有的选项。当用户输入或删除关键字时，我们将输入框中的关键字去除空格并转为小写，然后使用Array的filter()方法对选项数组进行过滤，只保留包含该关键字的选项。最后，调用renderOptions()函数将过滤后的选项渲染到下拉列表中。

接下来，我们需要编写这个renderOptions()函数。该函数需要接受一个选项数组作为参数，并将该数组中的所有选项渲染到下拉列表中。

function renderOptions(options) {
  var selectBox = document.getElementById("selectBox");
  selectBox.innerHTML = "";
  options.forEach(function(option) {
    var optionElement = document.createElement("option");
    optionElement.text = option;
    selectBox.add(optionElement);
  });
}

在renderOptions()函数中，我们首先获取下拉列表的DOM元素，并将其内部清空。接着，我们遍历传入的选项数组，并为每个选项创建一个option元素，然后将该元素添加到下拉列表中。

最后，我们需要在页面加载完成后调用renderOptions()函数，将初始的所有选项渲染到下拉列表中。

window.onload = function() {
  var searchBox = document.getElementById("searchBox");
  var selectBox = document.getElementById("selectBox");
  var options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", "Fig", "Grape", "Honeydew"];

  renderOptions(options);

  searchBox.addEventListener("keyup", function() {
    var keyword = searchBox.value.trim();
    var filteredOptions = options.filter(function(option) {
      return option.toLowerCase().includes(keyword.toLowerCase());
    });
    renderOptions(filteredOptions);
  });
}

至此，我们完成了生成可搜索选择下拉列表的实例的全部代码。接下来，我将给出两个示例说明。

示例1：基础实现

首先是一个基础的实现，我们只需要在页面中添加上述HTML结构和JavaScript代码，在搜索框中输入任意关键字即可动态过滤下拉列表。

示例2：动态加载选项

在第二个示例中，我们不再使用硬编码的选项列表，而是使用Ajax从服务器动态加载选项。首先，我们需要编写一个函数来获取选项列表。

function getOptions(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/options.json", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var options = JSON.parse(xhr.responseText);
      callback(options);
    }
  }
  xhr.send();
}

该函数使用XMLHttpRequest对象从服务器获取JSON格式的选项列表，然后调用回调函数将该列表传递出去。

接下来，我们需要将getOptions()函数传递给renderOptions()函数，使它可以在获取选项列表后进行渲染。

window.onload = function() {
  var searchBox = document.getElementById("searchBox");
  var selectBox = document.getElementById("selectBox");

  getOptions(function(options) {
    renderOptions(options);
  });

  searchBox.addEventListener("keyup", function() {
    var keyword = searchBox.value.trim();
    getOptions(function(options) {
      var filteredOptions = options.filter(function(option) {
        return option.toLowerCase().includes(keyword.toLowerCase());
      });
      renderOptions(filteredOptions);
    });
  });
}

在这段代码中，我们使用getOptions()函数获取所有的选项，并在函数返回后调用renderOptions()函数将它们渲染到下拉列表中。当用户输入关键字时，我们通过getOptions()函数获取所有的选项，并使用Array的filter()方法进行过滤。最后，调用renderOptions()函数渲染过滤后的选项到下拉列表中。

至此，我们完成了动态加载选项的实现。