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文件才能自动完成工作。