jquery autocomplete在退格后工作

问题描述 投票:0回答:2

有时自动完成显示以前的值或无,即使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);
                }
            });
        }
    });
}
jquery jquery-ui
2个回答
0
投票

我不确定如何识别所有潜在的问题。我将从一个有效的例子开始,尝试提供一些必须克服的主要项目。

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

希望有所帮助。


0
投票

我所做的只是更改我的HTML字段,如下所示:

onchange="CallMyFunction();"

ontextchanged="CallMyFunction();"

它现在会在您键入时显示结果,而不仅仅是在按退格键时。

© www.soinside.com 2019 - 2024. All rights reserved.