title: Autocomplete dropdown in MVC5?
body: <p>Hi i have one field in my view. That field is Customer it is a dropdown field. In that i have keep dropdown as select option to select the value. But i like to change that field as Autocomplete dropdown. </p>
  
  <p><a href="https://i.stack.imgur.com/OaqsG.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/OaqsG.jpg" alt="enter image description here"></a></p>
  
  <p>In the above image  I have customerName field as dropdown field but i keep it by search and select option. But now i like to change this to autocomplete dropdown like which is mention the in the below image.</p>
  
  <p><a href="https://i.stack.imgur.com/jdE9r.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/jdE9r.jpg" alt="enter image description here"></a></p>
  
  <p><strong>My view Code</strong></p>
  
  <pre><code> @Html.Label("Customer Name", new { @class = "control-label" })
   @Html.DropDownListFor(model =&gt; model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })
  </code></pre>
  
  <p><strong>My jquery Code</strong></p>
  
  <pre><code>  $(function () {
       debugger;
      $.ajax(
  
     '@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })',{
         type: "GET",
         datatype: "Json",
         success: function (data) {
         $.each(data, function (index, value) {
         $('#CustomerID').append('&lt;option value="' + value.CustomerID + '"&gt;' + value.DisplayName + '&lt;/option&gt;');
  
                  });
                 }
               });            
             });
  </code></pre>
  
  <p><strong>My Controller Code to get Customers and load in the field</strong></p>
  
  <pre><code>  public JsonResult GetVisitCustomer()
      {
          var objCustomerlist = (from c in db.Customers where c.IsDeleted== false select c).ToList();
          return Json( objCustomerlist,JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>I tried to explain my issue.  Any one help to resolve this issue. I tried many ways but its not working.  So any one understand my issue and give some solution or suggesstions.</p>
  
  <p>The Code which i have tried </p>
  
  <p>My View Code</p>
  
  <pre><code> @Html.Label("Customer Name", new { @class = "control-label" })
   @Html.TextBoxFor(Model=&gt;Model.CustomerID)
  </code></pre>
  
  <p>My Jquery Code</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          debugger;
          $("#CustomerID").autocomplete({
              source: function (request, response) {
                  $.ajax(
                       '@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })', {
                      type: "POST",
                      dataType: "json",
                      data: { term: request.term },
                      success: function (data) {
                          response($.map(data, function (item) {
                              return
                              { label=item.CustomerID, value= item.DisplayName
                              };
                          }))
  
                      }
                  })
              },
              messages: {
                  noResults: "", results: ""
              }
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>But this code is not working</p>
  
  <p>Advance Thanks..</p>