Javascript 组合框仅选择列表中的数据，但提交其3位代码HTML5

我想在我的表格中添加一个输入框，用户可以在其中选择与本网站中类似的机场（），就像当您键入目的地输入时，您会得到一个可能值列表，其中包含详细建议，包括城市名称+国家名称，但当用户提交表格时，提交的值是机场的3位代码

我尝试了html5组合框，如下所示：

<form>
    <input type="text" name="product" list="productName"/>
    <datalist id="productName">
        <option value="ISB">Pen</option>
        <option value="KHI">Pencil</option>
        <option value="PWH">Paper</option>
    </datalist>
    <input type="submit">
</form>

笔
铅笔
纸张

---

但如果我打字，就不会有任何建议。为此，请分享一些代码片段或任何库。

不完全确定此解决方案是否能帮助您，但通过一些jquery，您可以做到这一点：

$（“#提交”）。单击（函数（）
{
var值=$（“#产品”）.val（）；
警报（$（'#productName[value=“'+value+'“]”）。数据（'value'））；
$（'#productId'）.val（$（'#productName[value=“'+value+'“]）.data（'value'））；
//在这一行之后，表单应该提交并将正确的值传递给服务器，但值通过隐藏的输入传递
});
我建议使用自动完成插件（例如jQuery UI自动完成）代替HTML5数据列表。但是，如果问题与数据列表有关，则可以将产品代码填充到隐藏字段中：

<form>
    <input type="hidden" name="productCode" id="productCode" value="">
    <input type="text" name="product" id="product" list="productName" autocomplete="off">
    <datalist id="productName">
        <option data-code="ISB">Pen</option>
        <option data-code="KHI">Pencil</option>
        <option data-code="PWH">Paper</option>
    </datalist>
    <input type="submit">
</form>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function() {
    // use "bind" instead "on" with jQuery lt 1.7
    $("#product").on("input", function(e) {
        var val = $(this).val();
        var listId = $(this).attr("list");
        var $option = $("#" + listId + " option").filter(function() {
            return ($(this).val() == val);
        });
        var code = ($.type($option.data("code")) != "undefined" ? $option.data("code") : "");
        $("#productCode").val(code);
    });
});
</script>


笔
铅笔
纸张
$（函数（）{
//在jQuery lt 1.7中使用“bind”而不是“on”
$（“#产品”）。关于（“输入”，函数（e）{
var val=$（this.val（）；
var listId=$（this.attr（“list”）；
var$option=$（“#”+listId+“option”）.filter（函数（）{
返回（$（this）.val（）==val）；
});
变量代码=（$.type（$option.data（“代码”））！=“未定义”？$option.data（“代码”）：”）；
$（“#产品代码”）.val（代码）；
});
});
datalist在safari浏览器上不工作。。。！！使用jQuery autocomplete插件后如何填充产品代码？关于jQuery UI，请参见：您可能还需要检查此插件：