4

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;
        }
    });
4

1 に答える 1

2

以下はあなたのニーズを満たすと思います（正確に再現するのは難しいです）：

遅延応答を中止する簡単な方法はありませんが、ここでわかったように(bootstrap.js を変更せずに) typehead を拡張できます。

概念は、 をキャッチkeydownし、イベントがKEY_UPまたはKEY_DOWNであるかどうかを検出し、フラグを設定し、 true の場合(つまり、ユーザーがまたはを押した後に他のキーがない場合)is_browsingを中止することです。processis_browsingKEY_UPKEY_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);

この typeahead-extension は、セクションなど、どこにでも配置できます<script type="text/javascript">。

拡張機能のテスト:

<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>

強制遅延を伴う多くのランダム化されたオプションを返す「サーバーサイド」PHP スクリプト 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;
?>

それは本当に私のために働くようです。しかし、それがあなたの場合にうまくいくかどうかはわかりません。成功したかどうかを教えてください。

于 2013-03-25T13:43:15.063 に答える