限制按下拉列表中选定区域的搜索

时间:2017-09-26 20:36:54

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

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

enter image description here

这是我的控制器:

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>

1 个答案:

答案 0 :(得分:0)

这里是我发现的答案,有两个错误,一个在控制器代码中,另一个在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>

enter image description here