JQuery автозаполнение работает после возврата

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

Все, что я сделал, это изменил свое поле HTML следующим образом:

ОТ

onchange="CallMyFunction();"

ДО

ontextchanged="CallMyFunction();"

Теперь он показывает результаты, пока вы печатаете, а нетолько при нажатии клавиши Backspace.

Answer 2

Я не уверен, как определить все потенциальные проблемы.Я начну с рабочего примера и попытаюсь предложить некоторые основные элементы, которые необходимо преодолеть.

Пожалуйста, просмотрите: Как создать минимальный, полный и проверяемый пример Пожалуйста, сделайтеОбязательно укажите 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 и деталей в вашем коде.

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.Таким образом, рендеринг можно создать по мере необходимости, если пользователь изменит опцию.

Надеюсь, это поможет.