javascript - 最初のキーを押すたびにtypeAheadを機能させるにはどうすればよいですか

Question

最初の文字を入力すると、json ファイルのセットをロードするtypeAhead 関数 ( twitter typeaheadライブラリを使用) があります。

これらの json ファイルには、「words_a.json」、「words_b.json」などの名前が付けられています。これらのファイルには、A、B、C などの文字で始まるすべてのオランダ語の単語が含まれています。

私が直面している問題は次のとおりです。

1) 「#search-box」に最初の文字を入力するとすぐに、入力フィールドのフォーカスが失われます。これは、' jquery.one() ' 関数によるものです。これを防ぐ方法はありますか？

2）「jquery.keypress()」は使用できません。これは、入力するすべての文字でjsonファイルを呼び出すためです。最初の文字のjsonファイルを呼び出したいだけです。その文字で始まるすべての単語をロードする必要があります。

3) 「jquery.one()」のもう 1 つの欠点は、探している単語が見つかるとすぐに、新しい単語の検索を開始したいということです。したがって、入力フィールドのすべての文字を削除します。ただし、「jquery.one()」が既に一度起動され、json ファイルが既に読み込まれているため、入力した最初の文字の別の json ファイルは読み込まれません。入力フィールドからすべての文字が削除されたときに、この動作を回避して関数を再度開始する方法はありますか?

これが私のコードです：

<script>
        $(document).ready(function() {

                $('#search-box').one('keyup', function() {
                    var character = $('#search-box').val().substring(0, 1);
                    var chr = character.toLowerCase();
                    //console.log(chr);

                    $.getJSON('words/words_' + chr + '.json', function(wordsArray){
                        //console.log(wordsArray);
                        $('#search-box').typeahead({
                        name: 'words',
                        //local: [],
                        local: wordsArray,
                        limit: 10
                        }); // close typeAhead function
                    }); // close getJSON
                }); // close search-box keyup function

            $('#search-box').bind('typeahead:selected', function(obj, value) {
                //console.log(value.value);
                $('#resultaten').append('<a href="#" onClick="speak(&quot;'+value.value+'&quot;, &quot;nl&quot;)">' + value.value + '\
        &nbsp;<img src="img/speaker.png" alt="speaker"/></a><br />');

            }); //close typeahead selected selected function
            $('#search-box').typeahead().destroy();
        }); // close document.ready
</script>


<form class="form-search">
     <h2 class="form-search-heading">Zoek in OpenTaal woordenlijst</h2>
     <input type="text" class="input-block-level" placeholder="Zoekterm" id="search-box">
     <div id="resultaten"></div>
</form>