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

时间:2013-05-16 10:43:33

标签: jquery ajax json asp.net-mvc-3

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

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

所以搜索文本正在传递给控制器​​,但我不知道该怎么办就是用值填充下拉列表。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

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

查看您的代码,试试这个:

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

假设有“代码”和“名称”字段。使用萤火虫或铬来检查是否

    var item = data[i];

具有适当的值。