當導航替換引導程序typeheadhead

Question

我使用Bootstrap Typeahead來推薦som搜索結果。結果從ajax資源返回，並且由於此資源造成延遲，所以我遇到了不幸的後果。

例如： 如果輸入一個4個字母的單詞，建議將出現在2個字母后面，然後我可以通過上/下鍵查看結果，但突然間建議將重新加載，因爲上一個請求已完成。

如果用戶當前正在使用上/下鍵來檢查建議，有什麼方法可以「取消」剩下的任何方法嗎？

('#query').typeahead({ 
     items: 4, 
     source: function (query,process) { 

      map = {}; 
      $.getJSON('/app_dev.php/ajax/autosuggest/'+query, function (data) { 
       vehicles = []; 
       $.each(data, function(i,vehicle){ 
        map[vehicle.full] = vehicle; 
        vehicles.push(vehicle.full); 
       }); 
       process(vehicles); 
      }); 
     }, 
     updater: function (item) { 
      // do something here when item is selected 
     }, 
     highlighter: function (item) { 
      return item; 
     }, 
     matcher: function (item) { 
      return true; 
     } 
    }); 

Answer 1

我認爲下面將滿足您的需求（其很難完全照搬）：

有沒有簡單的方法來中止了延遲的響應，但你可以擴展預輸入as I figured out here（不修改引導的.js）

概念是捕捉​​，檢測如果事件是KEY_UP或KEY_DOWN，設置一個標誌is_browsing，然後中止process如果is_browsing是真實的（也就是說，如果用戶已經擊中了KEY_UP或KEY_DOWN並且之後沒有其他鍵）。

擴展預輸入：

// save the original function object 
var _superTypeahead = $.fn.typeahead; 

// add is_browsing as a new flag 
$.extend(_superTypeahead.defaults, { 
    is_browsing: false 
}); 

// create a new constructor 
var Typeahead = function(element, options) { 
    _superTypeahead.Constructor.apply(this, arguments) 
} 

// extend prototype and add a _super function 
Typeahead.prototype = $.extend({}, _superTypeahead.Constructor.prototype, { 
    constructor: Typeahead 

    , _super: function() { 
     var args = $.makeArray(arguments) 
     // call bootstrap core 
     _superTypeahead.Constructor.prototype[args.shift()].apply(this, args) 
    } 

    //override typeahead original keydown 
    , keydown: function (e) { 
     this._super('keydown', e) 
     this.options.is_browsing = ($.inArray(e.keyCode, [40,38])>-1) 
    } 

    //override process, abort if user is browsing 
    , process: function (items) { 
     if (this.options.is_browsing) return 
     this._super('process', items) 
    } 

}); 

// override the old initialization with the new constructor 
$.fn.typeahead = $.extend(function(option) { 
    var args = $.makeArray(arguments), 
    option = args.shift() 

    // this is executed everytime element.modal() is called 
    return this.each(function() { 
     var $this = $(this) 
     var data = $this.data('typeahead'), 
      options = $.extend({}, _superTypeahead.defaults, $this.data(), typeof option == 'object' && option) 

     if (!data) { 
      $this.data('typeahead', (data = new Typeahead(this, options))) 
     } 
     if (typeof option == 'string') { 
      data[option].apply(data, args) 
     } 
    }); 
}, $.fn.typeahead); 

此預輸入擴展可以放置在任何地方，例如在<script type="text/javascript"> -section

測試擴展：

<input type="text" id="test" name="test" placeholder="type some text" data-provide="typeahead"> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var url='typeahead.php'; 
    $("#test").typeahead({ 
     items : 10, 
     source: function (query, process) { 
      return $.get(url, { query: query }, function (data) { 
       return process(data.options); 
      }); 
     } 
    }); 
}); 
</script> 

A「 serverside「PHP腳本返回大量隨機選擇ns強制延遲，typeahead.php：

<? 
header('Content-type: application/json'); 
$JSON=''; 
sleep(3); //delay execution in 3 secs 
for ($count=0;$count<30000;$count++) { 
    if ($JSON!='') $JSON.=','; 
    //create random strings 
    $s=str_shuffle("abcdefghijklmnopq"); 
    $JSON.='"'.$s.'"'; 
} 
$JSON='{ "options": ['.$JSON.'] }'; 
echo $JSON; 
?> 

它真的好像爲我工作。但我不能確定它會適用於您的情況。如果你有成功與否，讓我現在。