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

<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);
});

型

我不知道如何在本地做到这一点。你可以创建一个“helper”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

这就是你想做的吗

var demoInput = document.getElementById('demoInput'); // give an id to your input and set it as variable
    demoInput.value ='books'; // set default value instead of html attribute
    demoInput.onfocus = function() { demoInput.value =''; }; // on focus - clear input
    demoInput.onblur = function() { demoInput.value ='books'; }; // on leave restore it.

个字符
这里唯一的“问题”是，为了看到选项，用户必须再次单击输入，所以它就像“双击输入来查看选项”。
希望能帮上忙。

我将使用input的placeholder属性沿着一段JavaScript代码，以确保提交时该字段不为空。
显然这只是一个例子，你必须修改提交事件。

document.getElementById('submitButton').addEventListener('click', function() {
  let inputElement = document.getElementById('myInput');
  if (!inputElement.value) {
    inputElement.value = 'Book';
  }
});

个字符

我已经用<select> + <option>标签而不是<input> + <datalist>来获取您所描述的内容：

<select name="sortBY">

  <option value="Book">Book</option>
  <option value="Copy">Copy</option>
  <option value="Page">Page</option>
</select>

字符串
把它全部放在<form></form>标签中将发送它。使用POST方法，值为$_POST['sortBY']。

如果这有帮助：
第一个月
其中'#grouptext'是您的文本输入，您的datalist '#grouplist'附加到该文本输入，#48是您要“预选”的ID。
下面是我的数据列表的样子，为了清楚起见，

对我很有效
在Chrome的控制台中，它显示为“option#115”，对应于datalist中该“id”的正确文本（为115）

的

//In case anyone finds it helpful (using jquery):
 <input type="text" list="listmiscomis" id="pon"/>
        <datalist id="listmiscomis">
            <option value="uno">uno</option>
            <option value="dos">dos</option>
            <option value="tres">tres</option>
            <option value="cuatro">cuatro</option>
            <option value="cinco">cinco</option>
        </datalist>   
//mark option
  $('#pon').val("dos");    
//having the focus passes the value to the place holder
$("#pon").on("focus",function(){
        if($('#pon').val() !== ""){
        let cont = $('#pon').val();
        $('#pon').attr("placeholder",cont);
        $('#pon').val("");
}
})    
//when it loses focus and if no option was selected it passes the place holder as value
$("#pon").blur(function(){
        if($('#pon').val() == ""){
        let valor = $('#pon').attr("placeholder");
        $('#pon').val(valor);
        $('#pon').removeAttr("placeholder");
    }
})
remove focus when selecting option
$(document).ready(function(){
    $("#pon").change(function(){
        $("#pon").blur();
    });
});

字符串

试试这个：

<form action="index.html" method="get">
            <label for="browser">Choose your browser from the list:</label>
            <input list="browsers" name="browser" id="browser" placeholder="Select an option">
            <datalist id="browsers">
                <option value="Edge">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
            </datalist>
            <input type="submit">
        </form>

字符串

设置id为你的输入和与js设置默认值

<script>
    setTimeout(() => {
        document.getElementById('orderTypes').value = "Book";
    }, 100);
</script>

字符串