title: How can i auto complete a dropdown list using ajax in MVC
body: <p>I'm trying to autocomplete a drop down list when someone types a postcode into a input field but I haven t been able to fill the dropdown list yet this is where I am:</p>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
          //&lt;![CDATA[
      // have we had at least 3 characters typed in?
      var searchTextTrigger = false;
  
      $(document).ready(function () {
          $('#postcodeSearch').focus();
      });
  
      // 0m0_uk
      $(function () {
          var content = $('#postcodeSearch').val();
          $('#postcodeSearch').keyup(function () {
              // have we had at least 3 characters in our text box
              if ($('#postcodeSearch').val().length &gt;= 3) {
                  // yes, so after this point even if we have less it will still send the request
                  searchTextTrigger = true;
              }
              if ($('#postcodeSearch').val() != content &amp;&amp; searchTextTrigger == true) {
                  content = $('#postcodeSearch').val();
                  var searchText = $('#postcodeSearch').val();
                  alert(searchText);
                  $.ajax({
                      url: "/Stores/AutocompleteSuggestions/" + etaleEncode(searchText),
                      success: function (data) {
                          $("#ajaxPostCodeList").html("");
                          for (var i = 0; i &lt; data.length; i++) {
                              var item = data[i];
                              $('#ajaxPostCodeList').append($("&lt;option&gt;&lt;/option&gt;").val(item.Code).html);
                          }
  
  
                      },
                      error: function () {
                          alert("an error occured");
                      }
                  });
              }
          });
  
      });
          //]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and in the form:</p>
  
  <pre><code>&lt;input id="postcodeSearch" name="postcodeSearch" type="text" /&gt;
      &lt;select id="ajaxPostCodeList"&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>The following section in the script is not working:</p>
  
  <pre><code>  success: function (data) {
                          $("#ajaxPostCodeList").html("");
                          for (var i = 0; i &lt; data.length; i++) {
                              var item = data[i];
                              $('#ajaxPostCodeList').append($("&lt;option&gt;&lt;/option&gt;").val(item.Code).html);
                          }
  
  
                      },
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code> [AcceptVerbs(HttpVerbs.Get)]
          public ActionResult AutocompleteSuggestions(string searchText)
          {
              var sTerm = searchText;
              if (!String.IsNullOrEmpty(searchText))
              {
                  sTerm = Decode(searchText);
              }
  
  
              var suggestions = _postcodeRepository.GetAutoCompleteSearchSuggestion(sTerm);
  
              return Json(suggestions.ToList());
          }
  </code></pre>
  
  <p>So the search text is passing ok into the controller but what i'm not sure how to do is fill the drop down list with the values.</p>
  
  <p>Any help much appreciated!</p>