如何在输入数据列表中设置默认值并且仍然有下拉列表？

Question

我正在使用 datalist HTML 属性来获取下拉输入框：

 <input list="orderTypes" value="Book">
<datalist id="orderTypes">
  <option value="Book">
  <option value="Copy">
  <option value="Page">
</datalist>

问题是现在我必须清除输入框才能查看所有下拉值。有没有一种方法可以有一个默认值，但在单击下拉图标时仍然可以查看数据列表中的所有值？

原文由 jedu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我知道没有办法在本地执行此操作。当输入字段有值时，您可以制作一个“助手”div 来使用。我无法隐藏本机下拉菜单，所以我重命名了 ID。使用 jQuery。

网页格式

<input list="orderTypes" id="dlInput">
<div id="helper" style="display:none;position:absolute;z-index:200;border:1pt solid #ccc;"></div>
<datalist id="orderTypes" style="z-index:100;">
   <option value="Book">
   <option value="Copy">
   <option value="Page">
</datalist>

脚本

$(function(){
    // make a copy of datalist
    var dl="";
    $("#orderTypes option").each(function(){
            dl+="<div class='dlOption'>"+$(this).val()+"</div>";
    });
    $("#helper").html(dl);
    $("#helper").width( $("#dlInput").width() );

    $(document).on("click","#dlInput",function(){
        // display list if it has value
        var lv=$("#dlInput").val();
        if( lv.length ){
                $("#orderTypes").attr("id","orderTypesHide");
                $("#helper").show();
        }
    });

    $(document).on("click",".dlOption",function(){
        $("#dlInput").val( $(this).html() );
        $("#helper").hide();
    });

    $(document).on("change","#dlInput",function(){
        if( $(this).val()==="" ){
            $("#orderTypesHide").attr("id","orderTypes");
            $("#helper").hide();
        }
    });
});

jsFiddle

原文由 Shawn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我也有同样的问题。我只是简单地添加了带有默认数据的占位符。在你的例子中：

 <input list="orderTypes" name="orderType" id="orderType" placeholder="Book" />

我听提交事件。如果输入值为空，我使用 Book 作为默认值，否则我使用给定值…

 $("#mySubmitButton").click(() => {
    // use event prevent here if need...
    const orderType = $("#orderType").val() || "Book";
    console.log(orderType);
});

原文由 lendoo 发布，翻译遵循 CC BY-SA 4.0 许可协议