限制在下拉列表中的选定区域搜索答案

【问题标题】：limit search by selected area in dropdownlist限制在下拉列表中的选定区域搜索
【发布时间】：2017-09-26 20:36:54
【问题描述】：

我尝试恢复下拉列表值并仅为所选字段自定义搜索.. 客户端只会在下拉列表中的所选区域中搜索.. 我试图找到解决方案但我找不到.. 感谢您的帮助

这是我的控制器：

public JsonResult GetSearchValue(string search,int? gvt)
{

    allsearch = db.Villes.Where(x => x.IdGouvernorat.CompareTo(gvt) == x.gouvernoratModels.IdGouvernorat.CompareTo(gvt)).Where(x => x.VilleName.Contains(search)).AsEnumerable().Select(x => new VilleModels { IdVille = x.IdVille, VilleName = x.VilleName }).ToList();

    return new JsonResult { Data = allsearch, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

这是我的cshtml：

@Html.DropDownListFor(m => m.VilleId1, Model.Gouvernorat, "Gouvernorat", new { @class = "btn btn-warning btn-block btn-lg dropdown-toggle",data_toggle="dropdown", @id = "dropdownlist", style = "width:100% !important" })   <div class="form-group has-success has-feedback" style="width:100%">
                    <input type="text" class="form-control" id="searchInput" placeholder="Entrez votre ville ou code postal" style="width:100%;max-width:100%;height: 45px;">
                    <i id="Icon" class="glyphicon glyphicon-ok form-control-feedback" style="color:#7dc24b;padding-top:5px"></i>
                </div>

我的脚本：

  <script>
    $("#searchInput").autocomplete(
        { 
            search: function () {
                $(this).addClass('ui-autocomplete-loading');
                $('#Icon').removeClass('glyphicon glyphicon-ok form-control-feedback');},
            open: function () {
                $(this).removeClass('ui-autocomplete-loading');
                $('#Icon').addClass('glyphicon glyphicon-ok form-control-feedback');},

            source: function (request, response) {


            $.ajax({

                url: '@Url.Action("GetSearchValue", "Home")',
                datatype: "json",
                data: { 

                    gvt: document.getElementById('dropdownlist').selectedIndex(),
                    search: $("#searchInput").val()
                },
                success: function (data) {

                    if (data.length>0) {
                        response($.map(data, function (item) {


                             $(document).ready(function () {

                                $("#error").slideUp();

                        });
                            return { label: item.VilleName, value: item.VilleName };
                        }
                        )
                        );
                    }                      
                    if (data.length === 0) {

                        $(document).ready(function () {

                                $("#error").show();

                        });
                    }
                },

                error: function (xhr, status, error) {
                    alert("error");
                }

            });

        }
    });

</script>

【问题讨论】：

你知道如何使用javascript调试器吗？在浏览器中按 f12 应该会调出开发工具，并且其中一个选项卡应该有一个调试器。有了它，您可以查看您的事件是否受到打击，如果您使用自动完成选择了正确的值。
它还有一个网络选项卡，可以让您知道您要发送到什么以及从服务器获取什么。
感谢@sam 我正在寻找错误但没有结果..
TypeError: document.getElementById(...).selectedIndex 不是函数
如果不是函数，那是什么？您的调试器应该能够告诉您。

标签： javascript c# asp.net .net asp.net-mvc-5

【解决方案1】：

这是我找到的答案，有两个错误，一个在控制器代码中，另一个在 Js 脚本中，控制器代码：

     public JsonResult GetSearchValue(string search,int? gvt)
    {         
        List<VilleModels> allsearch = new List<VilleModels>();        
        allsearch = db.Villes.Where(x => x.VilleName.Contains(search)).AsEnumerable().ToList();
        var localities = allsearch.Where(i=>i.IdGouvernorat == gvt).Select(x => new VilleModels { IdVille = x.IdVille, VilleName = x.VilleName }).ToList();
        return new JsonResult { Data = localities, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

JavaScript 代码：

 <script>
    $("#searchInput").autocomplete(
        { 
            search: function () {
                $(this).addClass('ui-autocomplete-loading');
                $('#Icon').removeClass('glyphicon glyphicon-ok form-control-feedback');},
            open: function () {
                $(this).removeClass('ui-autocomplete-loading');
                $('#Icon').addClass('glyphicon glyphicon-ok form-control-feedback');},

            source: function (request, response) {


            $.ajax({

                url: '@Url.Action("GetSearchValue", "Home")',
                datatype: "json",
                data: { 

                    gvt: document.getElementById("dropdownlist").value,
                    search: $("#searchInput").val()
                },
                success: function (data) {

                    if (data.length>0) {
                        response($.map(data, function (item) {


                             $(document).ready(function () {

                                $("#error").slideUp();

                        });
                            return { label: item.VilleName, value: item.VilleName };
                        }
                        )
                        );
                    }                      
                    if (data.length === 0) {

                        $(document).ready(function () {

                                $("#error").show();

                        });
                    }
                },

                error: function (xhr, status, error) {
                    alert("error");
                }

            });

        }
    });

</script>

【讨论】：