如何在 MVC 中使用 ajax 自动完成下拉列表

Question

当有人在输入字段中键入邮政编码但我无法填写下拉列表时，我正在尝试自动完成下拉列表，但这就是我所在的位置：

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>

形式：

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

脚本中的以下部分不起作用：

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


                    },

控制器

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

所以搜索文本可以正常传递到控制器中，但我不确定如何用值填充下拉列表。

非常感谢任何帮助！

Answer 1

看看这个答案，它显示了如何填充下拉列表： Populate drop downs

看看你的代码，试试这个：

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

假设有一个“代码”和“名称”字段。使用 firebug 或 chrome 检查是否

    var item = data[i];

具有适当的值。