javascript - 很棒的设置标签文本字段和隐藏字段值

Question

我正在使用 Awesoplete 来实现简单的文本字段自动完成。我有一个带有标签和值的数组，当选择某些内容时，我不希望它完成文本并将值(在本例中为 ID)添加到隐藏字段中。

docs

有人知道怎么做吗？

代码示例:

HTML:

<input type="text" id="title" name="title" class="form-control" placeholder="Titel" required />
<input type="hidden" id="id" name="id">

PHP:

<?php
$titles = array();
    foreach ($data as $title){
            $titles[] = array(
                "label" =>  $title->title,
                "value" => $title->id,
            );

    }
?>

JS

<script type="text/javascript">
    //array with all titles and id from a php array
    var jArray = <?php echo json_encode($titles); ?>;

    var input = document.getElementById("title");

    var input2 = document.getElementById("id");

    new Awesomplete(input, {
        list: jArray
    });



</script>

Answer 1

您可以使用 awesoplete-selectcomplete 事件通过执行此操作来设置隐藏输入的值

            window.addEventListener("awesomplete-selectcomplete", function(e){
                input2.value = e.text.value;
            }, false);

转到https://leaverou.github.io/awesomplete/#events了解有关事件的更多信息，但引用它，“回调将传递一个带有包含所选建议的文本属性的对象。”