ブートストラップTypeaheadを使用して検索を試みています。dropdown listAjaxを使用して取得できました。ただし、ドロップダウンの幅とその中のパディング、および基本的な背景色を変更したいと考えています。これは白です。どうすればいいのですか？
また、ドロップダウンの最後に常に表示a -> "View All Results"して、ユーザーがクリックすると検索結果ページに送られるようにします。
作成できましたが、ドロップダウンの外観を変更できませんでした。また、すべて表示が検索の影響を受けないようにし、一致したときに文字を強調表示しないようにします。
どうすれば変更できますか？これは私が現在得ているものです。
ドロップダウンの外観を変更するのを手伝ってください。
ドロップダウンの外観を変更するのは非常に簡単です。以前の回答では、Bootstrap CSS の後に含まれるファイルにカスタム スタイルを追加して、Bootstrap のスタイルをオーバーライドするために使用する必要があるセレクターを特定する必要があることが示唆されています。ブラウザのスタイルを使用することをお勧めします。 DOM 検査ツール。
ここで注意が必要なのは、結果の最後にそのカスタム リンクを追加することです。結果配列にアイテムを追加するのに最適な場所はrender関数の先頭にあることに気付きました。この関数はsorter、配列がスライスされた後に呼び出されるのとは異なります。オプションで設定された項目の最大数render。プラグイン オプションでは設定できないため、「手動で」上書きする必要があります。
$('input').typeahead().data('typeahead').render = function (items) {
var that = this
items.push('View All'); //Append "View All option"
//The rest is the default render function taken from bootstrap's js source
items = $(items).map(function (i, item) {
i = $(that.options.item).attr('data-value', item)
i.find('a').html(that.highlighter(item))
return i[0]
})
items.first().addClass('active')
this.$menu.html(items)
return this
};
highlighter次に、ユーザーの入力時にリンクが強調表示されないようにするには、デフォルトの機能をカスタマイズする必要があります。
highlighter: function (item) {
//If it's our link than just return the text in bold
if (item == 'View All')
return '<strong>' + item + '</strong>'
//The rest is the default hightlighter function taken from bootstrap's js source
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
});
}
最後に、カスタム リンクのクリックを処理するためにupdater、ドロップダウンからオプションが選択されるたびに呼び出される関数を実装する必要があります。
updater:function(item){
if(item == 'View All'){
//Handle click on our link
window.location = 'http://example.com/search?q=' + this.$element.val();
}
return item;
}