如何让input能够像select一样，实现选择和输入功能

减肥的大坤坤

于 2025-06-18 10:01:40 发布

阅读量146

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/pukun888/article/details/148732698

html 专栏收录该内容

1 篇文章

订阅专栏

原因

接到一个需求，要求input框能够实现选择和输入两种功能

解决方法

使用 datalist 标签

<div class="layui-inline">
     <label class="layui-form-label">客户po:</label>
     <div class="layui-input-inline">
         <input type="text" id="po" list="poList" class="layui-input">
         <datalist id="poList"></datalist>
     </div>
</div>

  function getPoList() {
     let html = "";

     $.ajax({
        url: "",
        type: "post",
        dataType: "json",
        data: {  },
        async: false,
        success: function (res) {
           let data = res.dataList;

           if (data != null) {
              html += '<option value=""></option>';
              for (var i = 0; i < data.length; i++) {
                  html += '<option value="' + data[i].CPNAME + '">' + data[i].CPNAME + '</option>';
              }
           }
        }
	});

    $("#poList").html(html);
}