מיון מרשימה – JavaScript

חיפוש חכם מתוך רשימה

במדריך זה נראה כיצד ניתן לבצע ב 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 + " השאר פרטים שנחזור אליך לגבי רכב זה "
          })
      }
				
			

ליצירת קשר השאירו פרטים כאן

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp