検索可能でトグル可能な FAQ を作成する Jquery スクリプトについて、いくつかの助けがありました。コードはここで見ることができます:
問題は、大文字の「H」を含む「How」という単語があり、「h」を検索しても見つからないことです。このスクリプトの大文字と小文字を区別しないようにするにはどうすればよいですか?
検索可能でトグル可能な FAQ を作成する Jquery スクリプトについて、いくつかの助けがありました。コードはここで見ることができます:
問題は、大文字の「H」を含む「How」という単語があり、「h」を検索しても見つからないことです。このスクリプトの大文字と小文字を区別しないようにするにはどうすればよいですか?
または、正規表現を使用してコードの量を大幅に削減できます。jsFiddle デモ
$('#search').keyup(function(e) {
// create the regular expression
var regEx = new RegExp($.map($(this).val().trim().split(' '), function(v) {
return '(?=.*?' + v + ')';
}).join(''), 'i');
// select all list items, hide and filter by the regex then show
$('#result li').hide().filter(function() {
return regEx.exec($(this).text());
}).show();
});
相対要素を決定するための現在のアルゴリズムに基づいて、jQuery メソッドを使用して、配列filter
に基づいて結果をフィルター処理できます。keywords
大まかなアイデアは次のとおりです。
// select the keywords as an array of lower case strings
var keywords = $(this).val().trim().toLowerCase().split(' ');
// select all list items, hide and filter then show
$('#result li').hide().filter(function() {
// get the lower case text for the list element
var text = $(this).text().toLowerCase();
// determine if any keyword matches, return true on first success
for (var i = 0; i < keywords.length; i++) {
if (text.indexOf(keywords[i]) >= 0) {
return true;
}
}
}).show();
この行を変更
$('#result LI:not(:contains('+keywords[i]+'))').hide();
に
$('#result LI').each(function()
{
if(this.innerHTML.toLowerCase().indexOf(keywords[i].toLowerCase()) === -1)
{
$(this).hide();
}
});
// split the search into words
var keywords = s.toLowerCase().split(' ');
// loop over the keywords and if it's not in a LI, hide it
for(var i=0; i<keywords.length; i++) {
$('#result LI').each(function (index, element) {
if ($(element).text().toLowerCase().indexOf(keywords) != -1) {
$(element).show();
} else {
$(element).hide();
}
});
}