2

ドロップダウンで選択した値に基づいてオートコンプリート テキストボックスに入力しようとしていますが、選択したドロップダウン値をパラメーターとしてオートコンプリート 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>

どこが間違っているのか教えてください。前もって感謝します。

4

1 に答える 1

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 {

                        }
                    }
                });
            });



        });
    });
于 2015-05-27T11:21:43.230 に答える