jquery - MVC3 jQuery Autocomplete-用户必须选择选项，选项ID发送到服务器

背景

目前，在我的一个项目中，我将jQuery autocomplete用于一些领域。

为了提供上下文，应用程序记录Runs。每个Run必须具有与之关联的Route。用户运行所在的Route含义。

当用户键入Route时，将通过Routes选项显示其autocomplete列表，但是数据库需要RouteID进行验证。

为了弥补这一点，我将RouteID存储在HiddenFor HtmlHelper中。当用户从autocomplete选择路由时，将分配HiddenFor。

我的问题是

如果用户键入Route的全名，而不是从autocomplete列表中选择它或输入不存在的Route，则不会分配HiddenFor。发生这种情况时，我必须按名称查找Route并验证其在服务器上是否存在。

我不想不必为每个autocomplete创建此替代方法。

底线

无论如何，可以使autocomplete的行为更像select list吗？我希望用户别无选择，只能从autocomplete列表中选择一个选项的文本，并将选定选项的值发送到服务器。

如果我必须坚持使用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);
}

最佳答案

我将为此使用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/

关于jquery - MVC3 jQuery Autocomplete-用户必须选择选项，选项ID发送到服务器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11125734/