javascript - 在下拉列表中按选定区域限制搜索

Question

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

这是我的 Controller :

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>

Answer 1

这是我找到的答案，有两个错误，一个在 Controller 代码中，另一个在 Js 脚本中， Controller 代码:

     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>