title: When using change event of jquery ui autocomplete, it is showing id after seleting item, which should be not displyed
body: <p>I used <strong>jquery ui for auto-completing text box value</strong>. </p>
  
  <p>I created <strong>array and bind name and id to the source of auto-complete</strong>. Initially i was having  problem that is if user not select from the list then it should take some action on this . 
  Then i searched on the above problem then i come to know solution that using <strong>change event of ui auto-complete</strong>.
  But now it causes one new problem that is- <strong>when i'm selecting item from list, then it is showing id in the text box and when i'm loosing focus then only it is showing name</strong> .
  It should not display id to the user which i'm setting for hidden field. </p>
  
  <p>How to avoid this ?</p>
  
  <p>I used following code-</p>
  
  <p>code from web page is -</p>
  
  <pre><code>&lt;div class="editor-field"&gt;
  
            @if (Model.ReportsTo != null)
            {
                 @Html.TextBox("ReportsTo_FullName", Model.ReportsTo.FullName)
            }
            else
            {
                  @Html.TextBox("ReportsTo_FullName", String.Empty, new { @id = "ReportsTo_FullName" })
            }
              @Html.HiddenFor(model =&gt; model.ReportsToId, "ReportsToId")
              @Html.ValidationMessageFor(model =&gt; model.ReportsToId)
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Code from script-</p>
  
  <pre><code>$(function () {
      $("#ReportsTo_FullName").autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: "/Employee/AutocompleteSuggestions",
                  type: "POST",
                  dataType: "json",
                  data:
                      {
                          term: request.term,
                          moduleName: "Employee"
                      },
                  success: function (data) {
                      response($.map(data, function (item) {
                          return { label: item.FullName, value: item.Id }
                      }
                      ))
                  }
              })
          },
          minLength: 1,
          focus: function (event, ui) {
              $("#ReportsTo_FullName").val(ui.item.label);
              return false;
          },
          change: function (event, ui) {
              if (ui.item != null) {
                  $("#ReportsTo_FullName").val(ui.item.label);
                  $("#ReportsToId").val(ui.item.value);
                  return false;
              }
              else {
                  $("#ReportsTo_FullName").css("color", "red");
              }
          }
      });
  });
  </code></pre>