How can i auto complete a dropdown list using ajax in MVC

Question

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:

JQuery

<script type="text/javascript" language="javascript">
        //<![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 >= 3) {
                // yes, so after this point even if we have less it will still send the request
                searchTextTrigger = true;
            }
            if ($('#postcodeSearch').val() != content && 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 < data.length; i++) {
                            var item = data[i];
                            $('#ajaxPostCodeList').append($("<option></option>").val(item.Code).html);
                        }


                    },
                    error: function () {
                        alert("an error occured");
                    }
                });
            }
        });

    });
        //]]>
</script>

and in the form:

<input id="postcodeSearch" name="postcodeSearch" type="text" />
    <select id="ajaxPostCodeList">
    </select>

The following section in the script is not working:

  success: function (data) {
                        $("#ajaxPostCodeList").html("");
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            $('#ajaxPostCodeList').append($("<option></option>").val(item.Code).html);
                        }


                    },

Controller

 [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());
        }

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.

Any help much appreciated!

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

Take a look at this answer, it shows how to populate the dropdowns: Populate drop downs

Looking at your code, try this:

$("#ajaxPostCodeList").append($("<option />").val(item.Code).text(item.Name));

Assuming there is a 'Code' and 'Name' field. Use firebug or chrome to check if

    var item = data[i];

has the appropriate values.

edited May 23 '17 at 10:25

Community

1
1

answered May 16 '13 at 13:11

lopezbertoni

3,551
3
37
53

i needed to change my controller so that it had public JsonResult and also JsonRequestBehavior.AllowGet); Thanks – anna May 16 '13 at 14:50

How can i auto complete a dropdown list using ajax in MVC

1 Answers1