title: ASP.NET MVC jquery autocomplete with value and text field
body: <p>controller</p>
  
  <pre><code>public ActionResult Search(string id)
  {
       id= Request.QueryString["term"];         
       var routeList = db.Movies.Where(r =&gt; r.Title.Contains(id))
                     .Take(5)
                     .Select(r =&gt; new { id = r.MovieID, label = r.Title, name = "MovieID" });
       return Json(routeList, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;input type="hidden"   id="MovieID"  name="MovieID" /&gt;
  &lt;input type="text" id="SelectedMovie" value=""/&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
     $("#SelectedMovie").autocomplete({
         source: function (request, response) {
             $.ajax({
                url: "/Transaction/Search", type: "POST", dataType: "json",                        
                data: { id: request.term }, 
                success: function (data) {
                response($.map(data, function (item) {                                
                  return { label: item.label, value: item.id }; //updated code
                 }));
               }
           });
       },
       select: function (event, ui) {
           $("#MovieID").val(ui.item.value);
           $("#SelectedMovie").val(ui.item.label);
           return false;
       }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have some kind of videostore app. When I go to rent a movie I need a combobox with movies which I can select by using autocomplete.
  Also requirement is that only ID (value) is saved to the databas and not the text itself.</p>
  
  <p>EDIT: here is the full working exqample</p>