我正在尝试使 JQuery UI 多个自动完成功能与 asp.net 核心 webapi 服务一起使用，该服务返回一个简单的 json 字符串列表。
我确定代码看起来很糟糕。我试图弄清楚如何确保在我在文本框中输入 2 个字符后开始查询响应以避免从服务中返回所有内容。
请参阅下面的服务器和客户端代码：
看法：
@{
Layout = null;
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = [];
$.ajax({
type: "GET",
url: "/api/customer",
dataType: "json",
success: function (response) {
console.table(response);
availableTags = response;
}
});
//var availableTags = [
// "ActionScript",
// "AppleScript",
// "Asp",
// "BASIC",
// "C",
// "C++",
// "Clojure",
// "COBOL",
// "ColdFusion",
// "Erlang",
// "Fortran",
// "Groovy",
// "Haskell",
// "Java",
// "JavaScript",
// "Lisp",
// "Perl",
// "PHP",
// "Python",
// "Ruby",
// "Scala",
// "Scheme",
//];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function (event) {
if (
event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active
) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response(
$.ui.autocomplete.filter(availableTags, extractLast(request.term))
);
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
},
});
});
</script>
</head>
<body data-new-gr-c-s-check-loaded="14.1003.0" data-gr-ext-installed="">
<img alt="Marvel Entertainment - Wikipedia" class="n3VNCb" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Marvel_Logo.svg" data-noaft="1" jsname="HiaYvf" jsaction="load:XAeZkd;" style="width: 320.896px; height: 129px; margin: 0px;">
<br/><br/>
<div class="ui-widget">
<label for="tags">Marvel Characters: </label>
<input id="tags"
size="50"
class="ui-autocomplete-input"
autocomplete="off" />
</div>
<ul id="ui-id-1"
tabindex="0"
class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front"
style="display: none; top: 33px; left: 219.688px; width: 441px">
<li class="ui-menu-item">
<div id="ui-id-17" tabindex="-1" class="ui-menu-item-wrapper">Scala</div>
</li>
</ul>
<div role="status"
aria-live="assertive"
aria-relevant="additions"
class="ui-helper-hidden-accessible">
<div style="display: none">
10 results are available, use up and down arrow keys to navigate.
</div>
<div style="display: none">
5 results are available, use up and down arrow keys to navigate.
</div>
<div style="display: none">
1 result is available, use up and down arrow keys to navigate.
</div>
<div>Scala</div>
</div>
</body>
网络API：
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WebApplication4.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class CustomerController : ControllerBase
{
[HttpGet]
public JsonResult Get()
{
var list = new List<string>();
list.Add("Aaron Stack");
list.Add("Abomination (Emil Blonsky)");
list.Add("Abomination (Ultimate)");
list.Add("Absorbing Man");
list.Add("Banshee");
list.Add("Baron Strucker");
list.Add("Baron Zemo (Heinrich Zemo)");
list.Add("Barracuda");
list.Add("Cable");
list.Add("Calamity");
list.Add("Caliban");
list.Add("Calypso");
var json = new JsonResult(list);
return json;
}
}
}
