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

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"}}

工作小提琴：https://jsfiddle.net/wc0rtpa9/

Answer 2

尝试使用ui.item.label当您将选定的文本设置为文本框时，请输入。

$(document).ready(function() { 
    var availableTags = [ 
    "1", 
    "2", 
    "3", 
    "4", 
    ]; 
    $(".tags").autocomplete({ 
    source: availableTags, 
    minLength: 1, 
    dataType: 'json', 
    select: function(event, ui) { 
     $('#initialNameField').val(ui.item.label); // input the selected text 
    } 
    }); 
}); 

下面是示例工作代码：http://jsfiddle.net/32Bck/625/