当我们需要在 ASP.NET MVC 应用程序中实现输入智能提示功能时,可以使用 typeahead.js 插件。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 实现输入智能提示功能”的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ASP.NET MVC使用typeahead.js实现输入智能提示功能 - Python技术站