html js 中 input 和datalist 一起用进行模糊查询，可编辑也可下拉

Question

html js 中 input 和datalist 一起用进行模糊查询，可编辑也可下拉

<span style="color: white;">评价维度:</span>
                    <br>
                    <!-- <select class="select1" id="trial1" >
                        <option> </option>
                    </select> -->
                    <input id="trial1" type="text" list="NameList1" style="padding:0.5em;" class="select1" element oninput="sj()">
                    <datalist id="NameList1">   
                        <option value=" " id="0" >   </option>                                         
                    <option value="" id="" >   </option>
                </datalist>

写成功后，程序放在手机移动设备中：如下图

我该怎么优化一下，让第一次点击文本框后不出现list 数据，文本框填写内容进行模糊查询，点击右侧三角形让出现下拉列表

Answer 1

【以下回答由 GPT 生成】

使用JavaScript可以实现你想要的优化效果。

首先，在HTML代码中，我们需要对输入框和三角形按钮进行一些修改。假设输入框为id为"myInput"，三角形按钮为id为"triangleButton"，修改后的代码如下：

<span style="color: white;">评价维度:</span>
<br />

<div style="position: relative;">
  <input id="myInput" type="text" list="NameList1" style="padding:0.5em;" class="select1">
  <datalist id="NameList1">
    <option value=""></option>
  </datalist>
  <button id="triangleButton" style="position: absolute; right: 0; top: 0;">▼</button>
</div>

接下来，我们需要添加一些JavaScript代码来实现优化功能。首先，我们需要在文档加载完成后给输入框和按钮添加一些事件监听器。在这些监听器中，我们将实现以下功能： 1. 第一次点击文本框时不显示下拉列表数据 2. 在文本框中输入内容后进行模糊查询 3. 点击右侧三角形时显示下拉列表

document.addEventListener("DOMContentLoaded", function() {
  var input = document.getElementById("myInput");
  var dataList = document.getElementById("NameList1");
  var triangleButton = document.getElementById("triangleButton");

  var isFirstClick = true; // 用于记录是否第一次点击输入框

  // 隐藏下拉列表数据函数
  function hideDataList() {
    dataList.innerHTML = ""; // 清空datalist中的选项
    dataList.style.display = "none"; // 隐藏datalist
  }

  // 显示下拉列表数据函数
  function showDataList() {
    dataList.innerHTML = "<option value='option1'>Option 1</option><option value='option2'>Option 2</option>"; // 模拟模糊查询的选项
    dataList.style.display = "block"; // 显示datalist
  }

  // 输入框点击事件监听器
  input.addEventListener("click", function() {
    if (isFirstClick) {
      hideDataList();
      isFirstClick = false;
    }
  });

  // 输入框输入事件监听器
  input.addEventListener("input", function() {
    hideDataList();

    // 模糊查询逻辑，根据输入框的值获取相应的选项并显示在datalist中
    var inputValue = input.value.toLowerCase();
    var options = dataList.getElementsByTagName("option");
    for (var i = 0; i < options.length; i++) {
      var optionValue = options[i].value.toLowerCase();
      if (optionValue.indexOf(inputValue) !== -1) {
        dataList.appendChild(options[i].cloneNode(true));
      }
    }

    // 如果有匹配的选项，则显示datalist
    if (dataList.childNodes.length > 0) {
      dataList.style.display = "block";
    }
  });

  // 三角形按钮点击事件监听器
  triangleButton.addEventListener("click", function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免点击按钮时触发输入框的点击事件
    hideDataList();
    showDataList();
  });
});

以上代码是一个基本的示例，你可以根据你的实际需求进行修改和扩展。这样，当你点击输入框时，第一次不会显示下拉列表数据；输入框输入内容后会进行模糊查询显示匹配的选项；点击三角形按钮时会显示下拉列表。

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/642469

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^