Получите текст от поля на keyup, но с задержкой дальнейшего ввода

У меня есть форма, которая отправлена удаленно, когда различные элементы изменяются. На поле поиска в особенности я использую keyup для обнаружения, когда текст в поле изменяется. Проблема с этим состоит в том, что, когда кто-то вводит "курицу" затем, форма отправлена семь раз только с последним подсчетом.

То, что было бы лучше, является чем-то вроде этого

  • обнаруженные keyup - начинают ожидать (в течение одной секунды)

  • другой обнаруженный keyup - перезапускает время ожидания

  • концы ожидания - получают значение и отправляют форму

прежде чем я уйду и кодирую свою собственную версию этого (я - действительно парень бэкенда только с небольшим js, я использую jQuery для всего), уже есть ли существующее решение этого? Кажется, что это было бы общее требование. Плагин jQuery, возможно? В противном случае, что самый простой и лучший способ состоит в том, чтобы кодировать это?

ОБНОВЛЕНИЕ - текущий код, добавленный для Dan (ниже)

Dan - это может быть релевантно. Один из плагинов jQuery, которые я использую на странице (tablesorter), требует этого файла - "tablesorter/jquery-latest.js", который, если включено, приводит к той же ошибке с Вашим кодом как прежде:

jQuery ("input#search") .data ("тайм-аут", пустой указатель) является неопределенным http ‍://192.168.0.234/javascripts/main.js? 1 264 084 467 Строк 11

Возможно, между различными определениями jQuery существует своего рода конфликт? (или что-то)

$(document).ready(function() {
  //initiate the shadowbox player
//  Shadowbox.init({
//    players:  ['html', 'iframe']
//  });
}); 

jQuery(function(){
  jQuery('input#search')
    .data('timeout', null)
    .keyup(function(){
      jQuery(this).data('timeout', setTimeout(function(){
          var mytext = jQuery('input#search').val();
          submitQuizForm();
          jQuery('input#search').next().html(mytext);
        }, 2000)
     )
     .keydown(function(){
       clearTimeout(jQuery(this).data('timeout'));
     });
    });
});

function submitQuizForm(){
  form = jQuery("#searchQuizzes");
  jQuery.ajax({
    async:true, 
    data:jQuery.param(form.serializeArray()), 
    dataType:'script', 
    type:'get', 
    url:'/millionaire/millionaire_quizzes',
    success: function(msg){ 
     // $("#chooseQuizMainTable").trigger("update"); 
    }
  }); 
  return true;
}
14
задан Brian Tompsett - 汤莱恩 15 June 2019 в 08:08
поделиться

2 ответа

Извините. Изменить 2000, однако многие миллисекунды вам нужны между сообщениями сервера

<input type="text" id="mytextbox" style="border: 1px solid" />
<span></span>

<script language="javascript" type="text/javascript">
    jQuery(function(){
      jQuery('#mytextbox')
        .data('timeout', null)
        .keyup(function(){
            clearTimeout(jQuery(this).data('timeout'));
            jQuery(this).data('timeout', setTimeout(submitQuizForm, 2000));
        });
    });
</script>
24
ответ дан 1 December 2019 в 07:12
поделиться

В качестве обновления я оказался с этим, который, кажется, хорошо работает:

function afterDelayedKeyup(selector, action, delay){
  jQuery(selector).keyup(function(){
    if(typeof(window['inputTimeout']) != "undefined"){
      clearTimeout(inputTimeout);
    }  
    inputTimeout = setTimeout(action, delay);
  });
}

я звоню из страницы в документе вопросов. Документ. Докурится с

  afterDelayedKeyup('input#search',"submitQuizForm()",500)

, что было бы мило Чтобы сделать новое событие jQuery, которое использует эту логику, например .Delayedkeyup, чтобы пойти наряду с .keyup, поэтому я мог просто сказать что-то вроде этого для документа по индивидуальной странице.

  jQuery('input#search').delayedKeyup(function(){
    submitQuizForm();
  });

Но я не знаю, как настроить jQuery таким образом. Это хорошая домашняя задача, хотя.

4
ответ дан 1 December 2019 в 07:12
поделиться
Другие вопросы по тегам:

Похожие вопросы: