ASP.NET：如何從Dropdownlist到自動完成

我有一個下拉列表，並希望使用jQuery將其變爲自動完成。ASP.NET：如何從Dropdownlist到自動完成

下拉看起來像這樣和工作原理：

@Html.DropDownListFor(m => m.CategoryID, new SelectList(Model.Categories, "ID", "Name", Model.CategoryID), "Categories", new { @class = "form-control" })

我還添加了使用jQuery的作品在自動完成域中。但到目前爲止，我只能以虛擬數據填充它：

$(function() { 
    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp" 
    ]; 

    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
});

我怎麼能填充我的下拉場與可在下拉菜單中的數據？

預先感謝您！

來源

2016-02-29 sebvst

對不起！你的問題是什麼？你想用來自類別列表的數據填充自動填充文本框？你有沒有嘗試遠程數據源的例子？ – Shyju

是的，確切地說。現在我有下拉菜單，但我想用自動填充文本框替換它。基礎數據應該相同。 – sebvst

您需要將source設置爲一種操作方法，該方法返回您希望以JSON格式顯示爲自動完成選項的數據。

$(function(){ 

    $("#tags").autocomplete({ 
     source: "@Url.Action("SearchCategories","Home")", 
     minLength: 1, 
     select: function (event, ui) { 

     //If you want to do something on the select event, you may do it here 
     //$("#tags").html(ui.item.label); 
     } 
    }); 

})

確保您有一個名爲在你的HomeController返回你想要的數據SearchCategories的操作方法。

public ActionResult SearchCategories(string term) 
{ 
    var db= new MyDbContext(); 
    var results = db.Categories.Where(s => s.Name.StartsWith(term)) 
             .Select(x=>new { id =x.Id, 
                 label =x.Name }).ToList(); 
    return Json(results,JsonRequestBehavior.AllowGet); 
}

這將使與ID tags輸入自動完成，假設你的jQuery UI庫（和它的依賴），在頁面加載正確，你不必在你的頁面的任何其他腳本錯誤。我已經使用Url.Action輔助方法來爲動作方法生成正確的相對URL。如果您的js代碼位於剃鬚刀視圖內，它將正常工作。但是，如果您的代碼位於外部js文件中，則應遵循this post中描述的方法。

來源

2016-03-01 00:13:14 Shyju

謝謝！這工作完美。起初我希望能夠將整個列表傳遞給視圖，但是您的方法完全按照我的想法工作，並且比傳遞整個列表更靈活。 – sebvst

嗨，如果可能的話，你可以回答我在asp mvc緩存中遇到的問題，[這裏]（http://stackoverflow.com/questions/35704618/asp-mvc-caching-static-contents-gives-500-internal-server - 恐怖）是個問題。任何幫助都會很棒。 – stom

ASP.NET：如何從Dropdownlist到自動完成

回答

相關問題