博客

ASP.NET MVC使用typeahead.js实现输入智能提示功能

  • Post category:C#

以下是“ASP.NET MVC使用typeahead.js实现输入智能提示功能”的完整攻略：

步骤1：安装typeahead.js

在Visual Studio中打开项目，右键单击项目名称，选择“管理NuGet程序包”。在NuGet管理器中搜索并安装typeahead.js。

步骤2：创建控制器

在Controllers文件夹中创建一个名为“TypeaheadController”的控制器，并添加以下代码：

public class TypeaheadController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult GetSuggestions(string query)
    {
        var suggestions = new List<string>
        {
            "Apple",
            "Banana",
            "Cherry",
            "Durian",
            "Elderberry",
            "Fig",
            "Grape",
            "Honeydew",
            "Iced Tea",
            "Jicama",
            "Kiwi",
            "Lemon",
            "Mango",
            "Nectarine",
            "Orange",
            "Papaya",
            "Quince",
            "Raspberry",
            "Strawberry",
            "Tangerine",
            "Ugli Fruit",
            "Vanilla",
            "Watermelon",
            "Xigua",
            "Yellow Watermelon",
            "Zucchini"
        };

        var filteredSuggestions = suggestions.Where(s => s.StartsWith(query, StringComparison.OrdinalIgnoreCase)).ToList();

        return Json(filteredSuggestions);
    }
}

这个控制器包含两个方法：Index和GetSuggestions。Index方法返回一个视图，该视图包含typeahead.js的输入框。GetSuggestions方法接收一个查询字符串，并返回与该查询字符串匹配的建议列表。

步骤3：创建视图

Views文件夹中创建一个名为“Index”的视图，并添加以下代码：

@{
    ViewData["Title"] = "Typeahead Example";
}

<h1>@ViewData["Title"]</h1>

<input type="text" id="typeahead-input" class="form-control" />

@section Scripts {
    <script src="~/lib/typeahead.js/dist/typeahead.bundle.min.js"></script>
    <script>
        $(function () {
            var engine = new Bloodhound({
                remote: {
                    url: '/Typeahead/GetSuggestions?query=%QUERY%',
                    wildcard: '%QUERY%'
                },
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

            $('#typeahead-input').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                name: 'suggestions',
                source: engine
            });
        });
    </script>
}

这个视图包含一个输入框，该输入框使用typeahead.js进行智能提示。在视图中，我们先引入typeahead.js的JavaScript文件，然后使用Bloodhound对象创建一个搜索引擎。最后，我们将搜索引擎与输入框关联起来。

示例1：获取建议列表

假设我们要获取与“app”匹配的建议列表。我们可以使用以下代码：

$.get('/Typeahead/GetSuggestions?query=app', function (data) {
    console.log(data);
});

这个代码将调用TypeaheadController的GetSuggestions方法，并返回与“app”匹配的建议列表。

示例2：自定义建议列表

假设我们要自定义建议列表，我们可以使用以下代码：

var suggestions = ['Apple', 'Banana', 'Cherry'];
$('#typeahead-input').typeahead({
    hint: true    highlight: true,
    minLength: 1
}, {
    name: 'suggestions',
    source: function (query, syncResults, asyncResults) {
        var filteredSuggestions = suggestions.filter(function (suggestion) {
            return suggestion.toLowerCase().indexOf(query.toLowerCase()) !== -1;
        });
        asyncResults(filteredSuggestions);
    }
});

这个代码将使用自定义的建议列表，并将其与输入框关联起来。

以上就是“ASP.NET MVC使用typeahead.js实现输入智能提示功能”的完整攻略。

Tags: