输入空格时取消自动填充请求,并仅在用户停止键入时触发

时间:2014-03-06 02:18:41

标签: javascript jquery ajax jquery-ui autocomplete

我尝试在互联网上搜索,但没有找到简单的答案,我认为这存在于我遇到的两个问题中。我的Jquery UI自动完成功能如下:

 $('#moviename').autocomplete({
            // URL is parsed by my framework
            source:"<?=URL::route('MovieAutocomplete')?>",
            minLength:2,
            dataType:"json",
            select:function(event,ui){
                // set artist id
                $('#movieid').val(ui.item.id);
                $('#moviename').prop('disabled',true);
                $('#moviedetails').prop('disabled',false);
                $('#movieclear').html('Clear');
                $('#moviehint').toggle();
            }
});

此代码有效。但是,我正在观察表演。我有两个问题:

  1. 我的控制器会在看到空白字词时取消该请求。但是,我想在发送请求之前检查这种情况。我玩过beforeSend,但它不能以某种方式工作。有人可以帮我完成这个吗?

  2. 我还想在用户停止输入时触发AJAX请求,比如给它一个500ms的时间等待它才能向服务器发送请求。有没有简单的方法来做到这一点?我猜“call autocomplete inside a keyup event which will be bound to the field I want”。请帮帮我。

  3. 如果有人可以为我调查这个,那就太好了。

1 个答案:

答案 0 :(得分:1)

我最近一直在使用jQuery UI autocomplete。这是我用过的逻辑&amp;它运作良好。

onKeydownMethod: function(event) {
        if ($(this).val().length >= App.autocompleteMinLength)
        {
if ($(this).val().length >= YOUR_MIN_LENGTH) {        
$('selector').autocomplete({
    minLength: YOUR_MIN_LENGTH, // min number of chars before request is made.
    delay: YOUR_DELAY, // mum of miliseconds to wait before making request.
    source: function(request, callback) {
        $.ajax({
            type: 'get',
            contentType: 'application/json',
            url: 'YOUR_URL' + ANY_PARAMS,
            dataType: 'json',
            timeout: 50000
        }).done(function(response) {
            callback(response);  // I used a callback to send data back to the parent function. Handle the response however you like here.
        }).fail(function(error) {
            switch (error.statusText)
            {
                case 'OK':
                    // handle response.
                break;
                default:
                    // handle response
                break;
             }
         });
     }
 });
}
}