Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter bootstrap typeahead delay [duplicate]

Tags:

I use twitter bootstrap typeahead for displaying some data from server, the problem is when user types an letter typeahead makes an ajax call to server and when I try to type 2 or 3 letters fast it will make 2 or 3 ajax calls to server, is there a possibility to make an delay when user is typing letters to make only one ajax call to server

my code at the moment:

$('#SEARCH-INPUT').typeahead({                             source: function (query, process) {                                  jQuery.ajax({                                     type: "GET",                                     url: "/organisations/search",                                     data: {search_name: $("#SEARCH-INPUT").val()},                                     beforeSend: function(){                                         $("#SEARCH-LOADING").show();                                     },                                     success: function (data) {                                         organisations = [];                                         organisations_hash = {};                                       $.each(data, function(i, item){                                         organisations_hash[item.name.toUpperCase()] = item.id;                                         organisations.push(item.name);                                        });                                       organisations.sort();                                        $("#SEARCH-LOADING").addClass("hidden");                                       process(organisations);                                     },                                     error: function (){ alert("error");},                                     async:   false                                     });                             }                             ,updater: function (item) {                                 $("#SEARCH-INPUT").val(item);                                 $("#SEARCH-BUTTON").click();                                 return item;                             }                             ,items: 9                             ,minLength: 1                        }); 
like image 615
Maki Avatar asked Jun 26 '13 11:06

Maki


1 Answers

Use this solution:

(function() {     var timeout;      $('[name="fill"]').typeahead({         source: function(value) {             if (timeout) {                 clearTimeout(timeout);             }              timeout = setTimeout(function() {                 alert(value);             }, 300);         }     }); })(); 

See in action:

http://jsfiddle.net/nnPVn/

setTimeout and clearTime works fine!

like image 163
MrBoolean Avatar answered Sep 17 '22 09:09

MrBoolean