JavaScriptでキーワード検索
jQueryでチェックボックスの絞り込みを実装しており、キーワード検索も追加したい
何かいい方法や参考サイトがあれば教えていただきたいです
追記
チェックボックスによる絞り込み
var searchBox = '.search-box';
var searchItem = '.search-box input';
// var listItem = '.cat_image';
var listItem = '.product_item'
var hideClass = 'is-hide';
$(function() {
$(document).on('change', searchBox + ' input', function() {
search_filter();
});
});
function search_filter() {
$(listItem).removeClass(hideClass);
for (var i = 0; i < $(searchBox).length; i++) {
var name = $(searchBox).eq(i).find('input').attr('name');
var searchData = get_selected_input_items(name);
if(searchData.length === 0 || searchData[0] === '') {
continue;
}
for (var j = 0; j < $(listItem).length; j++) {
var itemData = get_setting_values_in_item($(listItem).eq(j), name);
var check = array_match_check(itemData, searchData);
if(!check) {
$(listItem).eq(j).addClass(hideClass);
}
}
}
}
function get_selected_input_items(name) {
var searchData = [];
$('[name=' + name + ']:checked').each(function() {
searchData.push($(this).val());
});
return searchData;
}
function get_setting_values_in_item(target, data) {
var itemData = target.data(data);
if(!Array.isArray(itemData)) {
itemData = [itemData];
}
return itemData;
}
function array_match_check(arr1, arr2) {
var arrCheck = false;
for (var i = 0; i < arr1.length; i++) {
if(arr2.indexOf(arr1[i]) >= 0) {
arrCheck = true;
break;
}
}
return arrCheck;
}
キーワード検索
document.getElementById("serch_schedule").addEventListener("input", searchSchedule);
const searchSchedule = (e) => {
const keyword = e.target.value;
const $schedules = document.querySelectorAll("#display_schedule_area > li");
const $no_schedule = document.querySelector(".no_schedule");
$no_schedule.style.display = "none";
if (keyword) {
$schedules.forEach(e => e.style.display = "none");
const filter = Array.from($schedules).filter(e => {
const schedule_title = e.dataset.title;
const schedule_author = e.dataset.author;
if (schedule_title.indexOf(keyword.toLowerCase()) !== -1 ||
schedule_title.indexOf(keyword.toUpperCase()) !== -1 ||
schedule_author.indexOf(keyword.toLowerCase()) !== -1 ||
schedule_author.indexOf(keyword.toUpperCase()) !== -1) {
return e;
}
});
filter.length === 0 ? $no_schedule.style.display = "block" : filter.forEach(e => e.style.display = "block");
} else {
$schedules.forEach(e => e.style.display = "block");
$no_schedule.style.display = "none";
}
}
html
<div class="search-box">
<span class="search-box_title">カテゴリ</span>
<label><input type="checkbox" name="category" value="category1" class="checkbox">カテゴリ名</label>
<label><input type="checkbox" name="category" value="category2" class="checkbox">カテゴリ名</label>
<label><input type="checkbox" name="category" value="category3" class="checkbox">カテゴリ名</label>
<label><input type="checkbox" name="category" value="category4" class="checkbox">カテゴリ名</label>
<label><input type="checkbox" name="category" value="category5" class="checkbox">カテゴリ名</label>
</div>
<div class="search-box">
<span class="search-box_title">材質</span>
<label><input type="checkbox" name="material" value="material1" class="checkbox">材質</label>
<label><input type="checkbox" name="material" value="material2" class="checkbox">材質</label>
<label><input type="checkbox" name="material" value="material3" class="checkbox">材質</label>
<label><input type="checkbox" name="material" value="material4" class="checkbox">材質</label>
<label><input type="checkbox" name="material" value="material5" class="checkbox">材質</label>
</div>
<div class="search-box">
<span class="search-box_title">メーカー</span>
<label><input type="checkbox" name="maker" value="maker1" class="checkbox">メーカー名</label>
<label><input type="checkbox" name="maker" value="maker2" class="checkbox">メーカー名</label>
<label><input type="checkbox" name="maker" value="maker3" class="checkbox">メーカー名</label>
<label><input type="checkbox" name="maker" value="maker4" class="checkbox">メーカー名</label>
<label><input type="checkbox" name="maker" value="maker5" class="checkbox">メーカー名</label>
</div>
<div class="product_search">
<input type="text" id="serch_schedule" placeholder="キーワードで検索">
</div>
<ul class="products_category-wrapper product_list" id="display_schedule_area">
<li class="products_category product_item " data-category="category4" data-material="material1">
<a
href=""
class="products_category__img-wrapper product_item_link"
>
<img
src="img/top-products01.jpg"
width="2000"
height="1333"
alt=""
class="products_category__img product_item_img"
/>
</a>
<p class="product_item_copy">ボールタップ</p>
<p class="product_item_copy">材質</p>
<p class="product_item_copy">値段</p>
<p class="product_item_copy">メーカー</p>
</li>
css
.search-box_title{
font-weight: bold;
}
.search-box label {
cursor: pointer;
display: inline-block;
margin-right: 10px;
line-height: 16px;
}
.checkbox {
width: 16px;
height: 16px;
margin: -2px 5px 0 0;
padding: 0;
box-sizing: border-box;
vertical-align: middle;
appearance: checkbox;
}
].search-area input[type="text"] {
padding: 5px 5px 3px;
font-size: 16px;
border: 1px solid #D6D6D6;
}
.search-area input[type="text"]:focus {
background: #F9F9F9;
}
.search-result {
margin-top: 20px;
}
.search-result__hit-num span {
font-weight: bold;
}
#search-result__list {
margin-top: 15px;
}
#search-result__list span {
display: inline-block;
margin-right: 15px;
padding: 5px;
background: #F2F2F2;
}
コンソール画面に
Uncaught ReferenceError: Cannot access 'searchSchedule' before initialization
と表示されうまく作動しません。
初心者のため、調べて少しいじれば使用できそうなもので実装を試みているのですが、なかなかうまくいかず苦戦しています。
0
