Question

我想在文本框中使用一种Intellisense类型，如果用户在文本框中输入特定字符，它将自动在文本框下方显示结果作为建议。我以前在asp.net做过这个，但是现在想用MVC 4做这个。我在MVC 4中使用它和jquery mobile。我现在有一个文本框。我需要采取哪些步骤才能在文本框中获得结果。

 @Html.TextBox("name", null, new { id = "SearchBox", @class = "SearchBox" })

希望在MVC视图中使用此建议结果概念。感谢。

Answer 1

您可以使用jQuery UI autocomplete插件。基本上，您需要设置一个将使用AJAX调用的控制器操作，它将作为参数传递给用户在文本框中输入的term。此控制器操作应作为JSON结果返回插件将显示的建议列表。

例如：

public ActionResult Suggest(string term)
{
    // TODO: use the term here to query your data source
    // and return the suggested results as JSON:
    var results = new[]
    {
        new { id = "1", label = "label 1", value = "value 1" },
        new { id = "2", label = "label 2", value = "value 2" },
        new { id = "3", label = "label 3", value = "value 3" },
    };
    return Json(results, JsonRequestBehavior.AllowGet);
}

并在客户端上将插件附加到文本框：

<script type="text/javascript">
    $(function () {
        $('#SearchBox').autocomplete({
            source: '@Url.Action("Suggest")',
            minLength: 3,
            select: function (evt, ui) {

            }
        });
    });
</script>

显示在文本框mvc视图中键入的结果

1 个答案: