有时自动完成显示以前的值或无,即使sourceData中存在数据也是如此。当我按退格键时,它运行良好。我们需要在设置数据源时应用它的任何方法,请你帮我解决这个问题。我有以下代码:
function BindData(data) {
var arrData = data.split("@@");
var sourceData = [];
for (var i = 0; i < arrData.length; i++) {
var arrValue = arrData[i].split("||");
sourceData.push({ "value": arrValue[0], "label": arrValue[1] });
}
$(function () {
var Type = $('#slctType').val();
if (Type == "Case") {
$("#tags").autocomplete({
source: sourceData,
focus: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox
$(this).val(ui.item.label);
},
select: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
ID = ui.item.value;
//alert(ui.item.value);
//$("#autocomplete2-value").val(ui.item.value);
}
}).data("autocomplete")._renderItem = function (ul, item) {
var arrV = item.value.split("-");
var listItem = $("<li></li>")
.data("item.autocomplete", item)
.append("<a class = '" + arrV[1] + "Color'>" + item.label + "</a>")
.appendTo(ul);
return listItem;
};
}
else
{
$("#tags").autocomplete({
source: sourceData,
focus: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox
$(this).val(ui.item.label);
},
select: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
ID = ui.item.value;
//alert(ui.item.value);
//$("#autocomplete2-value").val(ui.item.value);
}
});
}
});
}
我不确定如何识别所有潜在的问题。我将从一个有效的例子开始,尝试提供一些必须克服的主要项目。
请查看:How to create a Minimal, Complete, and Verifiable example请确保在发布未来问题时提供MCVE。
工作示例:https://jsfiddle.net/Twisty/nwkdaeuo/
HTML
<div class="ui-widget">
<label for="slctType">Type: </label>
<select id="slctType">
<option>Case</option>
<option>Not Case</option>
</select>
<label for="tags">Stage: </label>
<input id="tags">
</div>
您没有在示例代码中提供任何HTML,因此我根据jQuery Demo和代码中的详细信息创建了一些HTML。
CSS
.redColor {
color: red;
}
同样,你没有提供任何CSS示例代码,所以我不得不做出一些假设。
JavaScript的
var myData = "2299||Final Testing@@2262||Soft Client testing@@2359||Testing for Link Child Entity@@2385||Testing Previous Company Name@@2385||Testing Previous Company Name@@9999-red||Test Case";
function BindData(data) {
console.log("Initial Data:", data);
var a = data.split("@@");
console.log("First Split:", a);
var s = [];
if (a.length < 1) {
return false;
}
$.each(a, function(i, v) {
console.log("Item:", v);
var av = v.split("||");
s.push({
"value": av[0],
"label": av[1]
});
});
console.log("Final Data:", s);
return s;
}
$(function() {
var sourceData = BindData(myData);
$("#tags").autocomplete({
source: sourceData,
focus: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
ID = ui.item.value;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
var listItem = $("<li>");
var arrV = "";
if ($("#slctType").val() == "Case" && item.value.indexOf("-") > 0) {
arrV = item.value.split("-");
console.log("Case:", arrV);
listItem
.data("item-autocomplete", item)
.append("<div><span class='" + arrV[1] + "Color'>" + item.label + "</div>");
} else {
listItem
.data("item-autocomplete", item)
.append("<div>" + item.label + "</div>");
}
listItem.appendTo(ul);
return listItem;
};
});
因此,为了更好地利用BindData()
函数,我让它返回结果对象数组。这允许您传递数据并返回适当的自动完成数组。目前尚不清楚这些数据的来源。如果它是API,您可以通过AJAX调用它。
前面的if
声明必须被移动。那里的逻辑假设用户永远不会改变slctType
选项。再说一次,如果没有适当的例子,我不得不做出很多猜测。我把这个逻辑移到了_renderItem
回调中。这样,在用户更改选项的情况下,可以根据需要创建渲染。
希望有所帮助。
我所做的只是更改我的HTML字段,如下所示:
从
onchange="CallMyFunction();"
至
ontextchanged="CallMyFunction();"
它现在会在您键入时显示结果,而不仅仅是在按退格键时。