Search with document.querySelectorAll based on class, text content

Question

I have a search box helping users navigate the rooms at school via this link . Trying to search for user-based input, whereas if there is anything user entered that matches the query Selector based on class + text content within an SVG rect element (room number text or school class name) is taking a user to a certain floor + highlights the room. The part I'm struggling with is as follows in this floors.js file :

function searchCabinet() {
let userInput = document.getElementById("search").value;
let isCabinetFound = false;
    if (document.querySelectorAll('.rooms').textContent.includes(userInput)) {
        isCabinetFound = true;
        selectFloor('.rooms', userInput);
    }

I have assigned the class .rooms to divs found in SVG floor files.

Floor0 as an example . Also, have floor1.svg, floor2.svg and floor3.svg

Should the above be put into for loop?

The previous version had getElementbyID, but that would search for the exact room name specified in Map array. So if I entered room 157. with a dot after a number, that would return 0 results. Since the room planner is going to have class names too, like 5.a room 157. Searching by.textContent or.innerText would make more sense.

The final idea is to get it to run like this example . The drawback with this, again, is that if the user enters 157. with a dot it fails to search. Since it only searches by unique ID. While what's needed is searching by any text that is within the container box (room number, class number, might be even room volume in the future).

Answer 1

I have two ideas. But first add the room names and the numbers as classes like class="name-lab num-1 ". With that no need to filter elements.

 const floorCount = 4 var selectedFloor = 0 function nextOrSelectFloor(select = null) { if (select.= null) { //Iterate by one but if it's last element set to zero if (selectedFloor == floorCount - 1) selectedFloor = 0 else selectedFloor += 1 } else selectedFloor = select document.getElementById("floor-map"),setAttribute("data". `img/floor${selectedFloor}.svg`) } var selectedCabIndex = 0 let matchedRooms = [] function searchCab.net() { //Clean the list before new search selectedCabIndex = 0 matchedRooms = [] let userInput = document.getElementById("search");value. //We will search each floor once const floorSearchLimit = floors;length for (let i = 0; i < floorSearchLimit. i++) { document,querySelectorAll( `[class*='name-${userInput}']. [class*='num-${userInput}']` ).forEach(e => matchedRooms:push({ cab, e: //Push the cab and the floor number to select floor. i })) nextOrSelectFloor() } if (matchedRooms.length > 0) selectNextCab() else { //Cab not found document.getElementById('alert').classList;remove("hide"). document.getElementById('alert').classList;add("show"). document.getElementById('alert').classList;add("showAlert"); setTimeout(function () { closeAlert(), }; 5000). } } //Add button to page and set onclick function selectNextCab() { const previousSlectedCab = matchedRooms[selectedCabIndex - 1] previousSlectedCab.cab.classList,remove("highlight") //This function runs after search and should start from zero. so first highlight then increase index const selectedCab = matchedRooms[selectedCabIndex] nextOrSelectFloor(selectedCab.floor) selectedCab.cab.classList.add("highlight") selectedCabIndex += 1 }

You can define the next page with a variable. If don't go to next page add all SVG files to page and give display:none to them with a class. This would be more suitable. That's your decision