חיפוש חכם מתוך רשימה
במדריך זה נראה כיצד ניתן לבצע ב Javascript מיון מתוך רשימה באמצעות שדה חיפוש
בדוגמא הבאה יש לנו רשימת מותגי רכבים ואנחנו רוצים בהקלדה של אותיות משמות מותגי הרכב המופיעים ברשימה שיוצגו התוצאות הרלוונטיות.
מימוש הקוד באמצעות אלמנטור
ראשית נוסיף 2 ווידג'טים פשוטים של "שדה חיפוש" ו "רשימת אייקונים"
נוסיף ID / CLASS או נשתמש בסלקטור הקיים כדי שנוכל ליצור משתנים עבורם
יש להגדיר משתנה לשדה חיפוש באמצעות הסלקטור שלו
let filterProduct = document.querySelector('#searchInput > div > form > div > input')
נבצע האזנה לאירוע של הרמת אצבע ממקשי המקלדת keyup
וקריאה לפונקציה שתבצע חיפוש
let filterProduct = document.querySelector('#searchInput > div > form > div > input')
filterProduct.addEventListener('keyup', filterName)
function filterName(){
let filterValue = filterProduct.value
}
יש להגדיר בתוך הפונקציה משתנה לרשימה ומשתנה לפריטים ברשימה באמצעות הסלקטור שלהם
let filterProduct = document.querySelector('#searchInput > div > form > div > input')
filterProduct.addEventListener('keyup', filterName)
function filterName(){
let filterValue = filterProduct.value
let ul = document.querySelector('#searchList > div > ul')
let li = ul.querySelectorAll('#searchList > div > ul > li')
}
נכתוב לולאה שתרוץ על כל הפריטים ברשימה ותחפש האם הוא מכיל את מה שהוקלד בשדה חיפוש
עם תנאי שבודק אם הפריט ברשימה מכיל את מה שהוקלד הצג ואם לא הסתר באמצעות המתודה indexOf המחזירה את המיקום של התו במחרוזת ובמקרה שלא נמצא שום תו שתואם הפונקציה מחזירה 1- לכן indexOf > -1
let filterProduct = document.querySelector('#searchInput > div > form > div > input')
filterProduct.addEventListener('keyup', filterName)
function filterName(){
let filterValue = filterProduct.value
let ul = document.querySelector('#searchList > div > ul')
let li = ul.querySelectorAll('#searchList > div > ul > li')
for(let i=0; i < li.length; i++){
let iconText = li[i].querySelector('.elementor-icon-list-text')
if(iconText.innerHTML.indexOf(filterValue) > -1){
li[i].style.display = ''
}else{
li[i].style.display = 'none'
}
}
}
הוספת ערך אחרון שנבחר לשדה בטופס
לאחר שהגולש לוחץ על אחד מאפשרויות הבחירה (סוג הרכב) נוסיף אוטומטית את הבחירה האחרונה שלו לשדה בטופס ולכותרת לפני הטופס
לדוגמא: בחר אחד מסוגי הרכב ברשימה והשדה "מתעניין ברכב" וכן הכותרת שלפני הטופס מקבלים את שת הערך הנבחר.
במקרה הזה יצרנו כותרת וטופס עם שדה "מתעניין ב" עם ID ייחודי ויצרנו משתנים עבור כל אחד מהם
נכתוב לולאה שרצה על כל הפריטים ברשימה ומאזינה לקליק של פריט ברשימה ופונקצייה שמזינה את הטקסט של הפריט ל2 המשתנים של הכותרת והשדה בטופס
let intrest = document.querySelector('#intrest > div > p')
let carField = document.querySelector('#form-field-field_car')
let text = document.querySelectorAll('.elementor-icon-list-text')
for(let t=0; t < text.length; t++){
text[t].addEventListener('click', () => {
carField.value = text[t].innerText
intrest.innerText = "התעניינת ברכב מסוג: " + text[t].innerText + " השאר פרטים שנחזור אליך לגבי רכב זה "
})
}