Вывод поиска телефона keyup на ajax

Question

Проблема в чём: есть некое поле input для поиска по контактам из базы. Ищу ajaxом через хуки битрикса. Вводу цифру из телефона - получаю ответ на каждый ввод предварительно очищая найденные до этого контакты. Но если быстро вводить номер телефона, то ajax запросы не успевают приходить и результат их появляется в уже очищенное поле, изза чего номера при быстром вводе номера, например, +7(901) отображаются контакты на +7(90 и +7(901). Нужно, как я понимаю сделать что-то типо abort() всех предыдущих запросов при вводе нового символа в строку телефона.

let appendContact = (phone_arg) => {
  var ajax;
  ajax = $.ajax({
    type: 'POST',
    url: "https://thai-way.bitrix24.ru/rest/780/***/crm.contact.list",
    data: {
      filter: {
        "PHONE": phone_arg
      },
      select: ["NAME", "PHONE"]
    },
    success: function(data) {
      for (var key in data.result) {
        var foundPhone = data.result[key].PHONE[0].VALUE
        var foundName = data.result[key].NAME
        var combineContact = `<div class="contacts-list-item" item-phone="${foundPhone}" item-name="${foundName}">` +
          `<div class="contacts-list-item_name">${foundName}</div>` +
          `<div class="contacts-list-item_name">${foundPhone}</div>` +
          `</div>`;
        $('#contacts-list').append(combineContact)
      }
    },
    dataType: "json",
  })
}

$("#phone").keydown(function() {
  var enderedPhone = $("#phone").val();
  var enderedPhoneValid = $("#phone").val().replace(/[\)\(\-\_\*]/g, '');
  $('#contacts-list').empty();
  appendContact(enderedPhone)
  appendContact(enderedPhoneValid)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="phone" class="control-label">Телефон</label>
<input autocomplete="off" placeholder="+7 (___)___-__-__" type="tel" id="phone" name="phone" class="form-control input-md" value="">
<div id="contacts-list">

</div>

Answer 1

Решил вопрос добавлением функции

$.xhrPool = [];
$.xhrPool.abortAll = function() {
  $(this).each(function(idx, jqXHR) {
    jqXHR.abort();
  });
  $.xhrPool.length = 0
};
$.ajaxSetup({
  beforeSend: function(jqXHR) {
    $.xhrPool.push(jqXHR);
  },
  complete: function(jqXHR) {
    var index = $.xhrPool.indexOf(jqXHR);
    if (index > -1) {
      $.xhrPool.splice(index, 1);
    }
  }
})

БЛОГ НА HUSL

Вывод поиска телефона keyup на ajax

Ответы (1 шт):