我遇到了最大的问题 **请不要重复报告我的问题，因为我没有在 GOOGLE 中得到 ASP.NET 的答案。
我在使用 Web 服务的 asp.net 中使用 jquery 自动完成文本框。 我的代码
$('input.txtE').autocomplete({
source: function (request, response) {
$.ajax({
url: "WebServices.asmx/GetNames",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'txtInput' : '" + request.term + "','userName':'" + userName + "'}",
dataFilter: function (data) { return data; },
success: function (data) {
mydata = data.d;
response($.map(data.d, function (item) {
return {
label: item.split('/')[0],
val: item.split('/')[1]
}
}))
},
error: function (result) {
alert("Error");
}
});
},
multiselect: false,
minLength: 1,
delay: 0,
select: function (e, ui) {
$(hfId).val(ui.item.val);
}
});<input type="hidden" id="hfId"/>
我的 API 以数组格式返回数据
["Abhishek/128", "Abyss/71", "athansiah/53", "blvsian/138", "DesmondH/91", "destined2hold/62", "dnbdesigns/94", "Dvus_lotus/85", "gserranof/47", "Illusions/89", "isaacwu111/111", "js/39"]
如果用户选择将他从自动完成列表中删除，我需要什么，这样我们就不能再次选择他。
请帮我把它短路
请您参考如下方法:
准备
首先，您需要存储设置的值。可以通过使用全局变量、隐藏输入控件或任意数据来实现 associated由您控制。在下面的示例中，我创建了一个与自动完成控件相关联的数组，然后将选定的值存储到该数组中:
$('#my-control').autocomplete({
create: function( e, ui ) {
// initialize array
$(this).data('selected', []);
},
select: function( e, ui ) {
// store unique selected values
var selected = $(this).data('selected');
if(!~selected.indexOf(ui.item.value)) {
selected.push(ui.item.value);
}
},
// another options here
});
现在可以考虑列表过滤的选定值。
服务器端解决方案
最好的方法是在 API 服务器端过滤列表，因为它可以减少传输的数据量。只需使用数据选项通过 AJAX 请求发送存储的值:
var $control = $('#my-control');
$control.autocomplete({
source: function (request, response) {
$.ajax({
// some AJAX options
data: {
term: request.term,
selected: $control.data('selected') // send stored values
}
});
},
// some autocomplete options here
});
然后你必须根据 selected 实现服务器端过滤查询字符串参数。 例如
public class AutocompleteSourceController : ApiController
{
[HttpGet]
public JsonResult<IEnumerable<MyClass>> GetItems(
[FromUri]string term,
[FromUri]int[] selected)
{
// Load data
// Fliter by term substring
// Exclude selected items
// Return the result
}
}
客户端解决方案
另一种方法是在客户端过滤响应列表，使用success AJAX 回调。在我的示例中，我将使用假 online REST API server .服务器忽略 term查询字符串字段，所以我也必须在客户端实现它。
$control = $('#my-input');
$control.autocomplete({
create: function(e, ui) {
$(this).data('selected', []);
},
source: function(request, response) {
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data) {
var items = data
// filter by term
.filter(function(user) {
return ~user.name.toLowerCase().indexOf(request.term.toLowerCase());
})
// exclude stored selected values
.filter(function(user) {
return !~$control.data('selected').indexOf(user.id);
})
// cast to an objects with label and value properties
.map(function(user) {
return {
label: user.name,
value: user.id
}
});
response(items);
},
error: function(result) {
alert("Error");
}
});
},
multiselect: false,
minLength: 1,
delay: 0,
select: function(e, ui) {
e.preventDefault();
$ctrl = $(this);
var selected = $control.data('selected');
if (!~selected.indexOf(ui.item.value)) {
// store selected value
selected.push(ui.item.value);
// set label instead of value
$ctrl.val(ui.item.label);
}
},
});<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<input id="my-input" type="text">输入 L到输入控件。第一项将是 Leanne Graham，选择它。然后清理输入字段并键入 L同样，下拉菜单中将没有 Leanne Graham。选择 Ervin Howell，然后清除输入字段并键入 L再次。下拉菜单中不会出现 Leanne Graham 和 Ervin Howell。
如果您只想考虑当前选择的值，您可以只存储最新值而不是数组并修改 success回调和 select事件处理程序。
