ASP.NET MVC 5 C＃中的Ajax jQuery自動完成功能

Question

我知道這類職位很多，但找不到適合我的職位。 我不了解ajax和jquery（實際上我剛開始使用MVC和ASP.NET），所以在這件事上我需要您的幫助。

幾乎到處都會有這種愚蠢的事情，我想在組合框，下拉列表（或其他內容）中寫一個城市名稱，並使用我已經創建的方法來返回位置列表（城市，國家和州名稱） ）匹配輸入的城市。 我希望它是dinamyc，這就是為什么我認為AJAX將解決此問題的原因（但可以接受任何其他解決方案）

我發現這個jQuery自動完成功能，但我不知道在哪里實現它。 我希望組合框匹配引導主題。 有人可以告訴我這是否是一個合適的解決方案，如果可以的話，我應該將ajax內容放在哪里？ （按我的意思，它是在視圖中還是在控制器中？在哪里？）

或者您可以給mi一個提示，這是我創建的用於從數據庫獲取元素的方法：

public List<LocationsViewModel> GetHeadquarter(string query)
{
    var context = new HeadquarterContext();
    //var city = context.Cities.Where(p => p.Name == query).Single();
    //var province = context.Provinces.Where(p => p.ProvinceID == city.Province).ToList();
    //foreach(Province prov in province) {

    //}
    var hq =
        from c in context.Cities
        join p in context.Provinces on c.Province equals p.ProvinceID
        join co in context.Countries on p.Country equals co.CountryID
        where c.Name == query
        select new { country = co.Name, province = p.Name, city = c.Name };

    List<LocationsViewModel> listLocation = new List<LocationsViewModel>();

    foreach (var hqe in hq)
    {
        LocationsViewModel loc = new LocationsViewModel();
        loc.City = hqe.city;
        loc.Country = hqe.country;
        loc.Province = hqe.province;
        listLocation.Add(loc);
    }
    return listLocation;
}

Answer 1

讓我們看看是否可以使其正常工作。

視圖：

這是在您的視圖中添加的，@ Url.Action（Action，Controller）是作為自動完成功能源的Action。

<input type="search" class="form-control ui-autocomplete" 
data-autocomplete="@Url.Action("Autocomplete", "Home")" />

控制器（主頁）：

如您所見，“動作自動完成”用於搜索產品。 我有一個名為“ _db”的數據庫實體實例，並選擇了一個名為“ product_data”的表（ 也可以使用存儲過程 ）。 我正在使用LINQ來查詢數據源並將其存儲在變量'model'中，因此它查詢的是'term'的位置StartsWith在文本框中鍵入的內容，它將排在前10位，並為每一項添加標簽和產品。 [{“ label”：value}]

public ActionResult Autocomplete(string term)
{
    try
    {
        var model = _db.product_data // your data here
            .Where(p => p.product.StartsWith(term))
            .Take(10)
            .Select(p => new
            {
                // jQuery UI needs the label property to function 
                label = p.product.Trim()
            });

        // Json returns [{"label":value}]
        return Json(model, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        Settings.ReportException(ex);
        return Json("{'ex':'Exception'}");
    }
}

JavaScript：

當您從搜索顯示的列表中選擇一個值時，將使用此代碼。 一旦從自動完成功能中選擇了一個值，“ window.location.href”將重定向到另一個控制器。

// submits form upon selecting a value
var submitAutocompleteForm = function (event, ui) {
    var $input = $(this); // the HTML element (Textbox)

    // selected value
    $input.val(ui.item.label); // ui.item.label = the label value (product)

    window.location.href = "/Product/Details?id=" + ui.item.label; 
};

下一個函數設置自動完成API。 您聲明選項，以上是可選的，位於select之下， 源是必需的，它指向HTML元素上的數據屬性 。

var createAutocomplete = function () {
    var $input = $(this); // the HTML element (Textbox)

    var options = {
        // selecting the source by finding elements with the 'data-' attribute
        source: $input.attr("data-autocomplete"), // Required
        select: submitAutocompleteForm // Optional
    };

    // apply options
    $input.autocomplete(options);
};

// targets input elements with the 'data-' attributes and each time the input changes
// it calls the 'createAutocomplete' function
$("input[data-autocomplete]").each(createAutocomplete);

您必須引用jQueryUI文件才能自動完成工作。