Question

我正在尝试根据下拉列表选择值填写自动完成文本框，但无法将选定的下拉列值作为参数传递给自动完成url.Action（）

以下是我正在使用的代码..

Dictionary<string, string> searchlist = new Dictionary<string, string>();
searchlist.Add("option1", "1");
searchlist.Add("option2", "2");
searchlist.Add("option3", "3");
searchlist.Add("option4", "4");

SelectList list = new SelectList(searchlist, "value", "key");

    @Html.DropDownListFor(m => m.SearchType, list, new {@id="category", @class = "select" })

       <script  type="text/javascript">
           $(document).ready(function () {
               $("#category").change(function () {
                       var selectedVal = $("#category option:selected").text();

                       alert("You selected :" + selectedVal);

               });
           });

  </script> 

    <input type="text" id="searchField" name="searchField"  data-autocomplete-url="@Url.Action("Autocomplete", "Home", new { lang = Model.Language, cattype = selectedVal  })" class="select" value="Search" onBlur="if(this.value == '') this.value = 'Search';" onFocus="if(this.value == 'Search') this.value = '';"   />
    <a href="#"><img src="@Url.Content("~/Content/images/magnifier.png")" alt="Search" title="Search" /></a>

请帮助我哪里出错了。提前谢谢。

Answer 1

你应该在DDL改变时触发自动完成：

 $(document).ready(function () {
        $("#category").change(function () {
            var selectedVal = $("#category option:selected").text();

            //fire autocomlete
            $('*[data-autocomplete-url]').each(function () {
                $(this).autocomplete(
                {
                  source:  function (request, response) {
                        $.ajax({
                            url:  $(this).attr('data-action'),
                            dataType: "json",
                            data: { lang : '@Model.Language', cattype : selectedVal   },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item.Label,
                                        value: item.Label,
                                        realValue: item.Value
                                    };
                                }));
                            },
                        });
                    },
                    minLength: 2,
                    select: function (event, ui) {
                        //do something
                    },
                    change: function (event, ui) {
                        if (!ui.item) {
                            this.value = '';
                        } else {

                        }
                    }
                });
            });



        });
    });

从jquery到mvc3操作的访问下拉选择值

1 个答案: