Функция клавиатуры работает только один раз для первой буквы ввода

2 ответа

success: function(response) {
    $("#NotAllowed").text(response);
    $('#loader_image').hide();
}

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    const [ { target } ] = args;
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(target, args);
    }, wait);
  };
}

const handleKeyUp = debounce(function() {
  $('#loader-image').show();
  $.ajax({
    type: 'GET',
    async: false,
    url: 'CheckPageName.php',
    data: { 'PageName': $(this).val() },
    cache: false,
    success: function(data, textStatus, jqXHR) {
      $('#not-allowed').html(data);
      $('#loader-image').hide();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#not-allowed').html('<p>Not found...</p>');
      // Hide the mask after 1 second, to mimic waiting for a response
      // Remove this timeout once the response is hooked-up
      setTimeout(function() {
        $('#loader-image').hide();
      }, 1000);
    }
  });
}, 250); // Search only after 250ms once typing has stopped

$('#loader-image').hide();
$('#page-name').on('keyup', handleKeyUp);

#loader-image {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="container">
  <form>
    <div class="mb-3">
      <label for="page-name" class="form-label">Search existing page name</label>
      <input type="text" id="page-name" name="page-name" class="form-control">
      <div id="page-name-help" class="form-text">Check for an existing page.</div>
    </div>
  </form>
  <hr />
  <div id="not-allowed"></div>
</div>
<div id="loader-image">Loading...</div>

Другие вопросы

• Разница между двумя датами, годами, месяцами, днями, часами, минутами1 ответ

  Я хочу создать счетчик, который показывает разницу между двумя датами. Годы, месяцы, дни и часы работают нормально, но минуты будут равняться -7, когда фактические минуты равны 0. Дата начала - 2020/10/25/1/7 (г / м / д / ч / м), а другая дата - фактическое время.const beginning = new Date(2020, 9, ...

• как выполнить итерацию во вложенном массиве1 ответ

  Здравствуйте, у меня такой структурированный JSON, и мне нужно перебрать элементы[ { "name": "About You", "questions": [ { "questionText": "What is your surname?", "answers": [ { "t...

• Как заставить Lodash sortBy () сортировать данные в порядке убывания?2 ответ

  sortBy () в Lodash не сортируется в порядке убывания, когда я передаю 'desc' при вызове функции какconst sortedData = _.sortBy(data, ['rawAvgPrice'], ['desc']); . Это отлично работает с порядком возрастания. Но не в порядке убывания. Я разместил написанную мной функцию сортировки. Я прочитал...

• Фоновое изображение заголовка исчезает и исчезает при прокрутке с нижним градиентом в приложении React1 ответ

  Мое изображение заголовка исчезает (исчезает при прокрутке). Я достиг этого остроумного javascript в моем приложении React:useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ window.pageYOffse...

• Проблемы с установкой sylius / product-bundle в мой проект Symfony 5.3 с помощью composer1 ответ

  Я пытаюсь разработать проект, но у меня возникают проблемы с установкой Sylius с помощью composer. Вот мойcomposer.json{ "type": "project", "license": "proprietary", "minimum-stability": "dev", "prefer-stable": tru...

• Состояние редактирования внутри модального окна1 ответ

  Я делаю небольшое приложение для заметок. Когда пользователь пишет свой заголовок и заметку и нажимает «Отправить», заметка помещается на страницу ... Я хочу иметь возможность редактировать заметку. При нажатии кнопки редактирования появляется модальное окно, и я хочу, чтобы заголовок и примечание п...

• Выберите элемент, необходимый в vuejs, не работает1 ответ

  Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...