訪問下拉列表中選擇值從jQuery來MVC3行動

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 { 

         } 
        } 
       }); 
      }); 



     }); 
    });