我输入标记很少,可以自动完成。
JavaScript:
api
HTML:
function processAutoComplete(objEvent, strResult, strTypeOrSubtype) {
if ($(objEvent.target).closest('.test-section[data-createdviapost]').length === 0) {
if (strTypeOrSubtype === '.test-type') {
strResult = strResult.filter(function (strVal) {
return lstTypeHidden.indexOf(strVal) == -1;
});
} else if (strTypeOrSubtype === '.test-subtype') {
strResult = strResult.filter(function (strVal) {
return lstSubTypeHidden.indexOf(strVal) == -1;
});
}
}
$(objEvent.target).closest('.test-section').find('' + strTypeOrSubtype + '').attr("data-source", '[' + strResult.join() + ']');
let lstDataSource = $(objEvent.target).attr("data-source").replace("[", "").replace("]", "").split(",");
$(objEvent.target).autocomplete({
minLength: 0,
source: function (request, response) {
var results = $.ui.autocomplete.filter(lstDataSource, request.term);
response(results.slice(0, 10));
},
response: function (event, ui) {
if (!ui.content.length) {
ui.content.push({
label: $Label.NoMatchesFound,
value: "",
id: 0
});
}
setTimeout(function () {
if (stringIsBlank($(event.target).val())) {
$(event.target).trigger('change');
}
}, 500);
},
select: function (objSelectEvent, objUI) {
if (strTypeOrSubtype === '.test-subtype') {
fireRemoteActionForCaseSubtype(objUI, objEvent);
} else {
if (objUI.item) {
setTimeout(function () {
$(objEvent.target).trigger('change');
}, 1000);
}
}
},
create: function (objEvent, objUI) {
$(objEvent.target).autocomplete('search', '');
}
}).click(function (objClickEvent) {
var caseValue = '';
var caseTypeValue = '';
if (strTypeOrSubtype === '.test-subtype') {
caseValue = $(objEvent.target).closest('.test-section').find(".test-type").val().trim();
fireRemoteActionForCaseType(caseValue, objEvent, objClickEvent);
} else {
caseValue = $(objEvent.target).closest('.test-section').find(".test-subtype").val().trim();
caseTypeValue = $(objEvent.target).closest('.test-section').find(".test-type").val().trim();
fireRemoteActionOnClickAutocomplete(caseTypeValue, caseValue, objEvent);
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var term = this.term;
var strItemLabel = item.label.trim();
var regex = new RegExp("(" + $.ui.autocomplete.escapeRegex(term) + ")", "ig");
var label = strItemLabel.replace(regex, '<b style="font-weight: bold;">$&</b>');
$link = $("<a></a>").html(label);
if ($(ul).attr("data-targetId") === undefined) {
$(ul).attr("data-targetId", $(objEvent.target).attr("id"));
}
if (strItemLabel.toUpperCase() !== $Label.NoMatchesFound.toUpperCase()) {
$link = $("<a></a>").html(label);
return $("<li></li>").append($link).appendTo(ul);
} else {
return $("<li class='no-select'>" + label + "</li>").appendTo(ul);
}
};
spinner(false);
}
在输入标签上多次单击后,浏览器速度变慢。 我可能有一个想法,为什么会这样,但是我不确定如何解决。
可能的问题:我在上面的代码中插入了两个 <input type="text" id="CaseType" class="autocomplete case-type" oninput="processAutoComplete(event)" onclick="processAutoComplete(event)"
required="required" data-apiname= "Type"/>
,我可能没有等他们完成。
可能的问题2:更新
setTimeout
在这些事件中只有timeStamp发生更改的情况下被多次触发。我认为因此setTimeOut排队,从而延迟了进一步的调用。不知道为什么会多次触发响应。
在这种情况下如何使用诺言?