2015-05-24 2 views
2

Я хочу получить значение поля ввода и отправить запрос ajax. Если я использую keyup или keypress или change, значение доступно мгновенно и запрос отправляется. Я хочу дождаться пользователя, например. в течение 1 или 2 секунд, чтобы он набирал целые слова, а затем отправлял запрос ajax. Мой код такой, чтобы получить vlaue. Благодарю.Получить значение ввода с помощью jQuery через несколько миллисекунд

var timeout = window.setTimeout(function() { 
     $('input#search').keyup(function() { 
      var key = $("#search").val(); 
      console.log(key); 
     }); 

    }, 1000); 
    clearTimeout(timeout); 
+1

Это не лучший подход, если вы надеетесь доставить положительный опыт пользователя. Вы никогда не можете быть уверены, что пользователь набирает текст только потому, что вы ждали сколько угодно секунд. У некоторых людей ужасно медленно. Вы должны рассмотреть либо кнопку рядом с формой, которая запускает запрос ajax, либо прослушивать ключ «вводить» в текстовом поле и затем делать запрос. – Vince

+0

Спасибо за ваш комментарий. Я добавил кнопку отправки, но также хочу вызвать запрос ajax, когда пользователь вводит что-то. Я просто хочу запустить ajax-запрос через 1 или 2 секунды. – rashidkhan

+0

@VCode: автозаполнение поискового запроса работает без кнопки – frenchie

ответ

3

Вы должны использовать таймер, а затем использовать clearTimeout его, чтобы сбросить его, как типы пользователей. Этот код будет делать то, что вы хотите, и вот jsFiddle.

var Timer; 

function Start() { 

    $('#TheInput').keyup(function() { 

     clearTimeout(Timer); 
     Timer = setTimeout(SendRequest, 1000); 
    }); 
} 


function SendRequest() { 

    var key = $("#TheInput").val();  
    alert(key); 
} 

$(Start); 
+0

Я не знал, что вы можете вызвать функцию типа '$ (Start);'. Есть ли польза для этого, а не для Start() ;? – DelightedD0D

+0

Спасибо @frenchie, это именно то, о чем я просил. – rashidkhan

+1

@ DelightedD0D: запись $ (начало) является сокращением для написания $ (document) .ready (Start) – frenchie

2

Каждый раз, когда вы вызываете функцию, вы должны очистить таймаут и установить новую, попробуйте следующее:

(function() { 
    var timeout = {}; 
    var update = function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     var key = $('#search').val(); 
     console.log(key); 
    }, 1000); 
    }; 

    $('input#search').keyup(update); 
    $('input#search').change(update); 
}()); 
Смежные вопросы