mvc中文本框的自动完成答案

【问题标题】：Autocomplete for textbox in mvcmvc中文本框的自动完成
【发布时间】：2015-04-13 20:35:24
【问题描述】：

这是我的视图和控制器。我已经将代码从 c# 转换为 vb，代码在 C# 中运行良好，但我不知道为什么这个 java 脚本在 vb 中不起作用。我开始调试，但是当我在搜索框中输入内容时，控制器永远不会被调用。

查看代码

@ModelType  PrudentHealthCare.Product
@Code
    Layout = Nothing
End Code

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>
</head>
<body>
    <div> 
        @Using (Html.BeginForm())
            @Html.HiddenFor(Function(model) model.id)
            @<input type="text" id="search" placeholder="Search for a product" required />
            @<input type="submit" value="Go" id="submit" />
        End Using
    </div>
</body>
</html>


<link href="~/Content/AutoComplete/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/AutoComplete/jquery-ui.js"></script>
<script src="~/Content/AutoComplete/jquery-1.9.1.js"></script>

<script type="text/javascript">
    var url = '@Url.RouteUrl( "DefaultApi" , New With { .httproute = "", .controller = "ProductApi" })';
    $('#search').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: url,
                data: { query: request.term },
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.Description,
                            value: item.Id
                        }
                    }));
                }
            })
        },
        select: function (event, ui) {
            $('#search').val(ui.item.label);
            $('#Id').val(ui.item.value);
            return false;
        },
        minLength: 1
    });
</script>

ProductApiController

Imports System.Web.Mvc

Namespace Controllers
    Public Class ProductApiController
        Inherits Controller

        <HttpGet>
        Public Function GetProducts(Optional query As String = "") As IEnumerable(Of Product)
            Dim xyz As String
            xyz = query
        End Function

    End Class
End Namespace

【问题讨论】：

你检查浏览器控制台是否有错误？
不，我没有检查过。如何在浏览器控制台的帮助下检查 javascript 是否运行良好。我有萤火虫，但我认为它不会做这种事情
你可以在火狐上完成。见here

标签： json asp.net-mvc vb.net autocomplete

【解决方案1】：

jQuery UI 有一个AutoComplete 小部件。自动完成小部件非常好用且直接使用。在这篇文章中，如何将 AutoComplete 小部件与 ASP.NET MVC 应用程序集成。

第一步是添加 jQuery 脚本和样式。使用 ASP.NET MVC 4，以下代码可以完成工作：

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")    
@Scripts.Render("~/bundles/jqueryui")

使用自动完成小部件也很简单。您必须添加一个文本框并将自动完成小部件附加到文本框。小部件运行所需的唯一参数是源。对于此示例，我们将从 MVC 操作方法获取 AutoComplete 功能的数据。

$(document).ready(function () {
$('#tags').autocomplete(
    {
        source: '@Url.Action("TagSearch", "Home")'
});
})

在上面的代码中，带有 id=tags 的文本框附加了 AutoComplete 小部件。源指向 HomeController 中 TagSearch 操作的 URL：/Home/TagSearch。文本框的 HTML 如下：

<input type="text" id="tags" />

当用户在文本框中键入一些文本时，将调用操作方法 - TagSearch 并在请求正文中使用参数。参数名称是 term。因此，您的操作方法应具有以下签名：

public ActionResult TagSearch(string term)
     {
// Get Tags from database
string[] tags = { "ASP.NET", "WebForms", 
                "MVC", "jQuery", "ActionResult", 
                "MangoDB", "Java", "Windows" };
 return this.Json(tags.Where(t => t.StartsWith(term)), 
                JsonRequestBehavior.AllowGet);
}

【讨论】：