javascript - 无法将自动完成选择值传递到输入字段

Question

我正在尝试将自动完成选择的值添加到 ID 为 initialNameField 的特定输入字段。

自动完成:

<div class="ui-widget">
   <label for="tags">Search: </label>
   <input class="tags" />
</div>

输入:

<input type="text" th:field="*{selectedInitialName}" class="initialNameField" id="initialNameField"
   name="initialName"/>

包括:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

自动完成脚本:

<script type="text/javascript">
        //<![CDATA[
        $(function() {
            var availableTags = [
                "1",
                "2",
                "3",
                "4",
            ];
            $(".tags").autocomplete({
                source: availableTags,
                minLength: 1,
                dataType: 'json',
                select: function(event, ui) {
                    $('#initialNameField').val(ui.item.id);
                }
            });
        });
        //]]>
    </script>

我应该做什么才能使这项工作成功？

Answer 1

您必须像这样设置值:

$('#initialNameField').val(ui.item.value); // Or ui.item.label

因为 ui 是一个对象，例如:{"item":{"label":"1","value":"1"}}

在这里工作 fiddle :https://jsfiddle.net/wc0rtpa9/