Question

即使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);
                }
            });
        }
    });
}

Answer 1

我不确定如何确定所有潜在问题。我将从一个可行的示例开始，并尝试提供一些必须克服的主要问题。

请查看：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回调中。这样，可以在用户更改选项的情况下根据需要创建渲染。

希望有帮助。

Answer 2

我所做的就是像这样更改HTML字段：

从

onchange="CallMyFunction();"

TO

ontextchanged="CallMyFunction();"

现在，它不仅可以在按退格键时在键入时显示结果。

jquery autocomplete在退格后工作

2 个答案: