我正在使用rottentomatoes电影API和twitter的typeahead插件使用bootstrap 2.0。我已经能够整合API,但我遇到的问题是在每个keyup事件之后调用API。这一切都很好,但是我宁愿在一个小暂停之后拨打电话,让用户先输入几个字符。
以下是我在keyup事件后调用API的当前代码:
var autocomplete = $('#searchinput').typeahead()
.on('keyup', function(ev){
ev.stopPropagation();
ev.preventDefault();
//filter out up/down, tab, enter, and escape keys
if( $.inArray(ev.keyCode,[40,38,9,13,27]) === -1 ){
var self = $(this);
//set typeahead source to empty
self.data('typeahead').source = [];
//active used so we aren't triggering duplicate keyup events
if( !self.data('active') && self.val().length > 0){
self.data('active', true);
//Do data request. Insert your own API logic here.
$.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?callback=?&apikey=MY_API_KEY&page_limit=5",{
q: encodeURI($(this).val())
}, function(data) {
//set this to true when your callback executes
self.data('active',true);
//Filter out your own parameters. Populate them into an array, since this is what typeahead's source requires
var arr = [],
i=0;
var movies = data.movies;
$.each(movies, function(index, movie) {
arr[i] = movie.title
i++;
});
//set your results into the typehead's source
self.data('typeahead').source = arr;
//trigger keyup on the typeahead to make it search
self.trigger('keyup');
//All done, set to false to prepare for the next remote query.
self.data('active', false);
});
}
}
});
是否可以设置一个小延迟并避免在每个键盘后调用API?
答案 0 :(得分:10)
可以像这样轻松完成:
var autocomplete = $('#searchinput').typeahead().on('keyup', delayRequest);
function dataRequest() {
// api request here
}
function delayRequest(ev) {
if(delayRequest.timeout) {
clearTimeout(delayRequest.timeout);
}
var target = this;
delayRequest.timeout = setTimeout(function() {
dataRequest.call(target, ev);
}, 200); // 200ms delay
}
答案 1 :(得分:4)
通常,可以使用setTimeout
和clearTimeout
方法实现此目的:
var timer;
$('#textbox').keyup(function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout('alert("Something cool happens here....");', 500);
});
setTimeout
将在指定的时间间隔(以毫秒为单位)后执行提供的javascript。 clearTimeout
将取消此执行。
我还准备了jsFiddle demo来展示代码片段。
参考文献:
答案 2 :(得分:2)
对于使用typeahead.js的v0.11并使用Bloodhound获取远程建议的人,您可以使用rateLimitWait选项来限制请求:
var search = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search?q=%QUERY',
rateLimitWait: 500
}
});
答案 3 :(得分:1)
不确定Bootstrap 2.0用于typeahead的版本,但v0.9.3有一个隐藏在引擎盖下的minLength选项,但没有记录。
$('#people').typeahead({
name: 'people',
prefetch: './names.json',
minLength: 3
});
从此博文中可以找到:http://tosbourn.com/2013/08/javascript/setting-a-minimum-length-for-your-search-in-typeahead-js/
答案 4 :(得分:-1)
如果您只是想让用户在ajax $ .getJSON请求之前输入几个字符,而不是延迟,您可以修改if语句,以便用户必须输入最少的字符数,例如3,在您申请数据之前:
if( !self.data('active') && self.val().length >=3){