入力フィールドにオートコンプリート選択値を渡すことができません

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

あなたはこのように値を設定する必要があります。https://jsfiddle.net/wc0rtpa9/

Answer 2

がui.item.labelを使用してみてください：ここフィドル作業{"item":{"label":"1","value":"1"}}

：uiのような物ですので

$('#initialNameField').val(ui.item.value); // Or 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/