Index: imaps-frontend/src/components/SearchBar/SearchBar.jsx
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,3 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
 import searchIcon from "../../assets/search_icon.png";
 import routeIcon from "../../assets/route_icon.png";
@@ -5,8 +6,13 @@
 import styles from "./SearchBar.module.css";
 
-function SearchBar(props) {
+function SearchBar({ map, handleDirectionsSubmit, setIsPanelOpen, setSelectedRoom, availableShapes,handleFloorChange }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [from, setFrom] = useState("");
   const [to, setTo] = useState("");
+  const [availableOptions, setAvailableOptions] = useState([]);
+  const [filteredOptions, setFilteredOptions] = useState([]);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [inputFieldType, setInputFieldType] = useState("");
+  const dropdownRef = useRef(null);
 
   const toggleExpanded = () => {
@@ -14,84 +20,143 @@
   };
 
-  function searchRoom(){
-    props.map.search();
+  function searchRoom() {
+    let foundRoom = availableShapes.find(sh => sh.info.name === from)
+    console.log("map fnum",map.floorNum)
+    if(foundRoom.floorNum !== map.floorNum){
+      handleFloorChange(foundRoom.floorNum);
+    }
 
+
+    console.log("FOUND ROOM: " + foundRoom)
+    map.highlightShape(from);
+    setSelectedRoom(foundRoom);
+    setIsPanelOpen(true);
   }
 
-  const handleDirectionsSubmit = () => {
-    console.log(`From: ${from}, To: ${to}`);
-    const url = new URL('http://localhost:8080/api/public/navigate');
-    url.searchParams.append('from', from);
-    url.searchParams.append('to', to);
+  const handleInputFocus = (field) => {
+    if (availableOptions.length === 0 && map) {
+      setAvailableOptions(
+          availableShapes
+              .filter((sh) => sh.className === "RenderedRoom")
+              .map((shape) => shape.info.name)
+      );
+    }
+    setDropdownVisible(true);
+    setInputFieldType(field);
+  };
 
-    fetch(url)
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-                return response.json();
-            })
-            .then(data => {
-                console.log('Success:', data);
-                const points = data.map(item => item.coordinates);
-                props.map.drawRoute(points);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
+  const handleInputChange = (setter) => (event) => {
+    const value = event.target.value;
+    setter(value);
+    setDropdownVisible(true);
+
+    const filtered = availableOptions.filter((option) =>
+        option.toLowerCase().includes(value.toLowerCase())
+    );
+    setFilteredOptions(filtered);
+  };
+
+  const handleOptionClick = (option) => {
+    if (inputFieldType === "from") {
+      setFrom(option);
+    } else if (inputFieldType === "to") {
+      setTo(option);
+    }
+    setDropdownVisible(false);
+  };
+
+  const renderDropdown = () => {
+    if (!dropdownVisible || filteredOptions.length === 0) return null;
+
+    const position = dropdownRef.current?.getBoundingClientRect() || { top: 0, left: 0, width: 0 };
+
+    return ReactDOM.createPortal(
+        <ul
+            className={styles.dropdown}
+            style={{
+              position: "absolute",
+              top: position.top + position.height,
+              left: position.left,
+              width: position.width,
+            }}
+        >
+          {filteredOptions.map((option, index) => (
+              <li
+                  key={index}
+                  className={styles.dropdownItem}
+                  onClick={() => handleOptionClick(option)}
+              >
+                {option}
+              </li>
+          ))}
+        </ul>,
+        document.body // Portal renders outside the parent hierarchy
+    );
   };
 
   return (
-    <div className={styles.wrapper}>
-      {/* Regular search bar */}
-      {!isExpanded ? (
-        <div className={styles.searchBar}>
-          <input
-            type="search"
-            className={styles.inputField}
-            placeholder="Search location"
-            aria-label="Search"
-          />
-          <div className={styles.buttons}>
-            <button type="button" className={styles.iconButton} onClick={searchRoom}>
-              <img src={searchIcon} alt="Search Icon" />
-            </button>
-            <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
-              <img src={routeIcon} alt="Route Icon" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        /* Expanded view for directions */
-        <div className={styles.directionsContainer}>
-          <div className={styles.directionsInputs}>
-            <input
-              type="text"
-              placeholder="From"
-              aria-label="From"
-              value={from}
-              onChange={(e) => setFrom(e.target.value)}
-              className={styles.inputField}
-            />
-            <input
-              type="text"
-              placeholder="To"
-              aria-label="To"
-              value={to}
-              onChange={(e) => setTo(e.target.value)}
-              className={styles.inputField}
-            />
-          </div>
-          <div className={styles.buttons}>
-            <button type="button" className={styles.iconButton} onClick={handleDirectionsSubmit}>
-              <img src={searchIcon} alt="Submit Directions" />
-            </button>
-            <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
-              <img src={closeIcon} alt="Close Icon" />
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
+      <div className={styles.wrapper}>
+        {!isExpanded ? (
+            <div className={styles.searchBar}>
+              <input
+                  type="search"
+                  className={styles.inputField}
+                  placeholder="Search location"
+                  aria-label="Search"
+                  ref={dropdownRef} // Attach the input to calculate dropdown position
+                  onFocus={() => handleInputFocus("from")}
+                  onChange={handleInputChange(setFrom)}
+                  value={from}
+              />
+              {renderDropdown()}
+              <div className={styles.buttons}>
+                <button type="button" className={styles.iconButton} onClick={searchRoom}>
+                  <img src={searchIcon} alt="Search Icon" />
+                </button>
+                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                  <img src={routeIcon} alt="Route Icon" />
+                </button>
+              </div>
+            </div>
+        ) : (
+            <div className={styles.directionsContainer}>
+              <div className={styles.directionsInputs}>
+                <input
+                    type="text"
+                    placeholder="From"
+                    aria-label="From"
+                    value={from}
+                    onFocus={() => handleInputFocus("from")}
+                    onChange={handleInputChange(setFrom)}
+                    className={styles.inputField}
+                    ref={inputFieldType === "from" ? dropdownRef : null}
+                />
+                <input
+                    type="text"
+                    placeholder="To"
+                    aria-label="To"
+                    value={to}
+                    onFocus={() => handleInputFocus("to")}
+                    onChange={handleInputChange(setTo)}
+                    className={styles.inputField}
+                    ref={inputFieldType === "to" ? dropdownRef : null}
+                />
+                {renderDropdown()}
+              </div>
+              <div className={styles.buttons}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={() => handleDirectionsSubmit(from, to)}
+                >
+                  <img src={searchIcon} alt="Submit Directions" />
+                </button>
+                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                  <img src={closeIcon} alt="Close Icon" />
+                </button>
+              </div>
+            </div>
+        )}
+      </div>
   );
 }
