jquery - MVC3 jQuery 自动完成 - 用户必须选择选项，选项 ID 发送到服务器

Question

背景
目前，在我的一个项目中，我正在使用 jQuery autocomplete 来处理一些字段。

为了提供上下文，应用程序会记录运行。每个Run 必须有一个与其关联的Route。 Route 意思是用户跑过的地方。

当用户输入路线时，路线列表将通过自动完成选项显示，但数据库需要RouteID 用于验证。

为了弥补这一点，我将 RouteID 存储在 HiddenFor HtmlHelper 中。当用户从自动完成中选择路线时，HiddenFor将被分配。

我的问题是什么
如果用户输入 Route 的全名，而不是从 autocomplete 列表中选择它，或者输入不存在的 Route， HiddenFor 将不会被分配。发生这种情况时，我必须通过名称找到Route并验证它是否存在于服务器上。

我不想为每个自动完成创建这个解决方法。

底线
有没有办法让自动完成更像一个选择列表？我希望用户别无选择，只能从自动完成列表中选择一个选项的文本，并将所选选项的值发送到服务器。

如果我必须坚持使用 HiddenFor 方法，是否至少有一种方法可以强制用户从 autocomplete 列表中选择一个选项？

---

下面是我当前使用的代码

标记

@Html.LabelFor(model => model.RouteID, "Route")
<input type="text" data-autocomplete-url="@Url.Action("../Route/GetRoutesByUser")" />
@Html.HiddenFor(m => m.RouteID)

---

jQuery

  $('*[data-autocomplete-url]')
    .each(function () {
        $(this).autocomplete({
            source: $(this).data("autocomplete-url"),
            minLength: 2,
            select: function (event, ui) {
                log(ui.item.id, ui.item.name);
            }
        });
    });

---

代码

public ActionResult GetRoutesByUser(string term)
{
    var routeList = db.Routes.Where(r => r.Name.Contains(term))
                    .Take(5)
                    .Select(r => new { id = r.RouteID, label = r.Name, name = "RouteID"});
    return Json(routeList, JsonRequestBehavior.AllowGet);
}

Answer 1

我将使用 change 事件来实现此目的，如果未选择某个项目，则清除 input 的值:

$('*[data-autocomplete-url]')
    .each(function () {
        $(this).autocomplete({
            source: $(this).data("autocomplete-url"),
            minLength: 2,
            select: function (event, ui) {
                log(ui.item.id, ui.item.name);
            },
            change: function (event, ui) { 
                if (!ui.item) { 
                    this.value = '';
                } else {
                    // Populate your hidden input.
                }
            }
        });
    });
});

示例: http://jsfiddle.net/urEzm/