Jquery autocomplete

●Jquery autocomplete(番号だけ)
------------------- html -------------------
<input type="text" class="form-control text-size-16" value="@Model.ProjectId" id="autoCompleteId" />
------------------- js -------------------
　　var AutoCompleteData = '@Url.Action("AutoCompleteJsonData", "controller名")';　//番号だけ
　　
    $("#autoCompleteId").autocomplete({
        source: AutoCompleteData,
        minLength: 2
    });
    
●Jquery autocomplete(IDと名前)
------------------- html -------------------
<label for="user_name_search" class="control-label" style="padding-left:50px" data-toggle="tooltip" title="担当者"><span class="glyphicon glyphicon-user"></span></label>
<input type="text" class="form-control text-size-16" value="@Model.UserName" id="UserName" />
<input type="hidden" id="hidden_user_id_search" value="@Model.UserId" />
------------------- js -------------------
　　var AutoCompleteData = '@Url.Action("AutoCompleteJsonData", "controller名")';　//IDと名前等
　　
    $("#UserName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: AutoCompleteData,
                type: "POST",
                dataType: "json",
                data: {
                    UserName: request.term,
                    groupID: 0
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.user_name, value: item.user_name, Id: item.user_id };
                    }))


                }
            })
        },
        //選択した内容に対するIDをhidden_user_id_searchに設定する
        select: function (event, ui) {
            $("#hidden_user_id_search").val(ui.item.Id);
        },
        minLength: 1
    });