利用js实现产品筛选功能带搜索案例

js特效通用案例

简述：判断一如果点击.lxtype-warp .lxtype .lxtype-box .lxtype-list时,当前的.lxtype-list加个active的class类，相应.lxtype-warp .lxtype-contant是加个active的class类显示的；始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。每当再点击其他.lxtype-warp .lxtype .lxtype-box .lxtype-list时，当前的.lxtype-list加个active的class类，相应.lxtype-warp .lxtype-contant也是加个active的class类显示的，此时优先显示在第一排，始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。如果当前.lxty...

利用js实现产品筛选功能带搜索案例

详情：

判断一

如果点击.lxtype-warp .lxtype .lxtype-box .lxtype-list时,当前的.lxtype-list加个active的class类，相应.lxtype-warp .lxtype-contant是加个active的class类显示的；始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。

每当再点击其他.lxtype-warp .lxtype .lxtype-box .lxtype-list时，当前的.lxtype-list加个active的class类，相应.lxtype-warp .lxtype-contant也是加个active的class类显示的，此时优先显示在第一排，始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。

如果当前.lxtype-warp .lxtype .lxtype-box .lxtype-list第二次点击时，和相应.lxtype-warp .lxtype-contant都去掉active，

如果当前.lxtype-warp .lxtype .lxtype-box .lxtype-list第三次点击时，当前的.lxtype-list又加个active的class类，相应.lxtype-warp .lxtype-contant又加个active的class类显示的，此时再优先显示在第一排，始时所有.lxtype-warp .lxtype-contant没有加到active的class类就隐藏。

此次类推

如果当所有.lxtype-warp .lxtype .lxtype-box .lxtype-list点击时, 所有.lxtype-list都去掉active的class类状态时；

所有.lxtype-warp .lxtype-contant都去掉active的class类状态时，

始时所有.lxtype-warp .lxtype-contant就回到页面进入时 lxtype-contant-wrap里面所有 lxtype-contant那样排列显示的为一开始状态：

每当点击想input#ProKey时，自动获取当前的当前lxtype-warp里面（如果当前有lxtype-contant.active就获取里面的，没就获取lxtype-contant的）显示的里面的wj-list动态页面的内容

当input#ProKey这个里面打字时，当前lxtype-warp动态页面的内容（如果当前有lxtype-contant.active就获取里面的，没就获取lxtype-contant的）显示的里面的wj-list>h5内容或wj-list->img的src文本有相同字眼时

.custom-collection-products{position: relative;}

.lxtype{position: absolute;right: 0;width: 25%;z-index: 2;background: #fff;}

.lxtype-t{display: flex;justify-content: space-between;padding: 3% 9%;border: 1px solid #d0c5c5;border-radius: 50px;}

.lxtype-t .cfjt{display: flex;align-items: center;color: #000;width: 10px;}

.lxtype-t .cfjt.active{transform: rotate(180deg);}

.wj-list{display: flex;}

.wj-list div img{width: 100%;height: 100%;}

.wj-list div:nth-of-type(1){width: 35%;}

.wj-list div:nth-of-type(2){margin-left: 2%;display: flex;align-items: center;width: 65%;}

.lxtype-box{box-shadow: rgba(0, 0, 0, .1) 0 0 15px;padding: 1% 9%;margin-top: 2rem; display: none;}

.lxtype-list{display: flex;align-items: center;justify-content: space-between;padding: 3% 0 1%;}

.lxtype-list div{width: 16px;height: 16px; border: 1px solid #eb6100; border-radius: 100%;display: flex;justify-content: center;align-items: center;}

.lxtype-list div span{width: 8px;height: 8px;border-radius: 100%;background:#eb6100;display:none;}

.lxtype-list:hover,.lxtype-t:hover{cursor:pointer;}

.lxtype-list.active{color:#eb6100;}

.lxtype-list.active div span{display: block;}

.lxtype-contant {

display: none;

}

.lxtype-contant.active {

display: block!important;

order: -1;

}

.lxtype-contant-container {

display: flex;

flex-direction: column;

}

.lxtype-box.active {

display: block;

}

.zong-lxtype-contant.gbactive{display: none!important;}

.lxtype-contant-wrap{

display: flex;

flex-direction: column;

}

.highlight{color:red!important;}

</style>

<span>RESOURCE TYPE</span>

</svg></span>

</div>

<div class="lxtype-list">Certificates <div><span></span></div></div>

<div class="lxtype-list">Credit Application <div><span></span></div></div>

<div class="lxtype-list">Installation Instructions <div><span></span></div></div>

<div class="lxtype-list">Maintenance <div><span></span></div></div>

<div class="lxtype-list">Product Drawing <div><span></span></div></div>

<div class="lxtype-list">Sales & Marketing <div><span></span></div></div>

<div class="lxtype-list">Specification <div><span></span></div></div>

</div>

{% for article in blogs['Certificates'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}

</div>

{% for article in blogs['Credit-Application'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}

</div>

{% for article in blogs['Installation-Instructions'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}.

</div>

{% for article in blogs['Maintenance'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}

</div>

{% for article in blogs['Product-Drawing'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}

</div>

{% for article in blogs['Sales-Marketing'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}

</div>

{% for article in blogs['specification'].articles %}

{% assign matching_tags = false %}

{% for product_tag in product.tags %}

{% if article.tags contains product_tag %}

{% assign matching_tags = true %}

{% endif %}

{% endfor %}

{% if matching_tags %}

{% if article.image %}

{% else %}

{% endif %}

<div>

<h5>{{ article.title }}-{{ article.content | strip_html | truncate: 200 }}</h5>

</div>

{% endif %}

{% endfor %}

</div>

document.addEventListener('DOMContentLoaded', () => {

const lists = document.querySelectorAll('.lxtype-list');

const contents = document.querySelectorAll('.lxtype-contant');

const searchInput = document.getElementById('ProKey');

let clickCounts = Array(lists.length).fill(0);

let initialOrder = Array.from(contents); // Initial order of contents

let currentContents; // To store current contents based on active status

// Initialize, display all .lxtype-contant

contents.forEach(content => content.style.display = 'block');

function updateDisplay() {

let anyActive = false;

contents.forEach((content, index) => {

if (lists[index].classList.contains('active')) {

content.style.display = 'block';

anyActive = true;

} else {

content.style.display = 'none';

}

});

if (!anyActive) {

contents.forEach(content => content.style.display = 'block');

}

function searchAndFilter(keyword) {

let found = false;

let hasHighlight = false;

currentContents.forEach(content => {

const wjLists = content.querySelectorAll('.wj-list');

let contentHasMatch = false;

wjLists.forEach(wjList => {

const h5 = wjList.querySelector('h5');

const img = wjList.querySelector('img');

const text = h5.textContent.toLowerCase();

const alt = img.alt.toLowerCase();

// Remove previous highlights

h5.innerHTML = h5.textContent;

img.alt = img.alt.replace(/<span class="highlight">|<\/span>/g, '');

if (text.includes(keyword) || alt.includes(keyword)) {

// Highlight the keyword

h5.innerHTML = h5.textContent.replace(new RegExp(`(${keyword})`, 'gi'), '<span class="highlight">$1</span>');

img.alt = img.alt.replace(new RegExp(`(${keyword})`, 'gi'), '<span class="highlight">$1</span>');

wjList.style.display = 'flex';

found = true;

hasHighlight = true;

contentHasMatch = true;

} else {

wjList.style.display = 'none';

}

});

if (contentHasMatch) {

content.style.display = 'block';

} else {

content.style.display = 'none';

}

});

// Hide all non-highlighted .lxtype-contant elements

if (!hasHighlight) {

currentContents.forEach(content => content.style.display = 'none');

}

return found;

}

function showNoResultsMessage() {

const noResultsContainer = document.createElement('div');

noResultsContainer.classList.add('melxtype-contant');

noResultsContainer.innerHTML = '<style>.lxtype-contant.active{display:none!important;}</style><div class="wj-list"><div><h5>没有找到你要搜的数据</h5></div></div>';

document.querySelector('.lxtype-contant-wrap').appendChild(noResultsContainer);

}

function hideNoResultsMessage() {

const noResultsContainer = document.querySelector('.lxtype-contant-wrap .melxtype-contant');

if (noResultsContainer) {

noResultsContainer.remove();

}

function resetSearchResults() {

currentContents.forEach(content => {

content.style.display = 'block'; // Show all content

const wjLists = content.querySelectorAll('.wj-list');

wjLists.forEach(wjList => {

const h5 = wjList.querySelector('h5');

const img = wjList.querySelector('img');

h5.innerHTML = h5.textContent; // Remove highlight

img.alt = img.alt.replace(/<span class="highlight">|<\/span>/g, ''); // Remove highlight

wjList.style.display = 'flex'; // Show all wj-lists with display: flex

});

hideNoResultsMessage(); // Remove "no results" message if shown

}

function handleInput() {

const keyword = searchInput.value.trim().toLowerCase();

if (keyword === '') {

resetSearchResults();

} else {

const found = searchAndFilter(keyword);

if (!found) {

hideNoResultsMessage();

showNoResultsMessage();

} else {

hideNoResultsMessage();

}

searchInput.addEventListener('input', handleInput);

searchInput.addEventListener('click', () => {

currentContents = document.querySelectorAll('.lxtype-contant.active');

if (currentContents.length === 0) {

currentContents = contents;

}

});

lists.forEach((list, index) => {

list.addEventListener('click', () => {

clickCounts[index]++;

if (clickCounts[index] % 2 === 1) { // Odd clicks

list.classList.add('active');

contents[index].classList.add('active');

document.querySelector('.lxtype-contant-wrap').insertBefore(contents[index], document.querySelector('.lxtype-contant-wrap').firstChild);

} else { // Even clicks

list.classList.remove('active');

contents[index].classList.remove('active');

}

const allInactive = Array.from(lists).every(item => !item.classList.contains('active'));

if (allInactive) {

initialOrder.forEach(content => document.querySelector('.lxtype-contant-wrap').appendChild(content));

contents.forEach(content => content.style.display = 'block');

clickCounts = Array(lists.length).fill(0); // Reset click counts

const keyword = searchInput.value.trim().toLowerCase();

if (keyword !== '') {

searchAndFilter(keyword);

}

} else {

updateDisplay();

}

});

updateDisplay();

const toggleButton = document.querySelector('.lxtype-t');

const cfjt = document.querySelector('.cfjt');

const box = document.querySelector('.lxtype-box');

toggleButton.addEventListener('click', () => {

cfjt.classList.toggle('active');

box.classList.toggle('active');

});

</script>