Twitterの先行入力された文字の強調表示

Question

私はTwitter Typeahead（v0.10.5 typeahead.bundle.jshere）とHandlebars v4.0.6を使用しています。

と入力した単語がであることを除けば、すべてが期待どおりに機能しています（データセットとオートコンプリートを検索できます）。これがどのように表示されるかの例を見ることができますhere。

私のコードは以下の通りです。

var books = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 10, 
    prefetch: { 
     url: 'books.json', 
     ttl: 0, 
     filter: function(list) { 
      return $.map(list, function(book) { 
       return { 
        title: book.title, 
       }; 
      }); 
     } 
    } 
}); 

$('.demo .typeahead').typeahead({ 
    hint: false, 
    highlight: true, // <-- this doesn't work 
    minLength: 1 
}, { 
    name: 'books', 
    displayKey: 'title', 
    source: books.ttAdapter(), 
    engine: Handlebars, 
    templates: { 
     empty: ['<div class="empty-message">', 'no results found', '</div>'].join('\n'), 
     suggestion: Handlebars.compile('<p>{{{title}}}</p>') 
    }, 
}); 

私は自分のCSSのすべてを削除したので、それはCSSの問題だとは思わないし、ハイライトもありません。

私はtypeahead（v0.11.1）の最新バージョンを試しましたが、これは違いはありません。

何か助けていただければ幸いです。

Answer 1

多くの人が、必要なパラメータminLength: xを指定しないという問題を抱えているようです。

あなたの場合は、既にこれを行っています。問題は、CSS

.tt-cursor { 
    color: #f1b218; 
}