Merge pull request #8 from acmucsd-projects/search-page

Search page
acmucsd-projects · Aug 8, 2024 · cbb961c · cbb961c
2 parents 70d28be + fbcd81c
commit cbb961c
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 3 deletions.
diff --git a/source/assets/images/apple-icon.png b/source/assets/images/apple-icon.png
diff --git a/source/assets/images/banana-icon.png b/source/assets/images/banana-icon.png
diff --git a/source/assets/images/blueberry-icon.png b/source/assets/images/blueberry-icon.png
diff --git a/source/assets/images/grape-icon.jpg b/source/assets/images/grape-icon.jpg
diff --git a/source/assets/images/pineapple-icon.jpg b/source/assets/images/pineapple-icon.jpg
diff --git a/source/assets/images/strawberry-icon.png b/source/assets/images/strawberry-icon.png
diff --git a/source/item-price.html b/source/item-price.html
@@ -17,10 +17,211 @@ <h1>Go Go Grocery</h1>
             <a href="./user-page.html">Sign In</a>
         </header>
 
-
         <main>
-            <h1>WIREFRAME PAGE 7</h1>
-            <!--CODE FOR THE PRICE COMPARISON-->
+            <button id="clearButton" class="clear-button">Clear</button>
+            <style>
+                /* Clear Button */
+                .clear-button {
+                    padding: 10px;
+                    position: absolute; 
+                    right: 15px;    
+                    top: 114px;              
+                    font-size: 16px;
+                    cursor: pointer;
+                    font-weight: bold;
+                }
+                .suggestions {
+                    position: absolute;
+                    top: 26.2%;
+                    left: 5%;
+                    border: 1px solid #ccc;
+                    background-color: #fff;
+                    position: absolute;
+                    width: 1322px;
+                    max-height: 200px;
+                    overflow-y: auto;
+                    z-index: 1000;
+                    font-weight: bold;
+                }
+                .suggestions div {
+                    padding: 10px;
+                    cursor: pointer;
+                }
+                .suggestions div:hover {
+                    background-color: #eee;
+                }
+                /* Code for Search Bar */
+                .search-container {
+                    margin: 30px;
+                    text-align: center;
+                    padding-top: 35px;
+                }
+                .search-bar {
+                    width: 1300px;
+                    padding: 10px;
+                    font-size: 16px;
+                    font-weight: bold;
+                    border: 2px solid coral;
+                    border-radius: 5px;
+                    background-color: coral;
+                }
+                .no-results {
+                    text-align: center;
+                    font-size: 35px;
+                    color: #ff0000;
+                    margin-top: 20px;
+                    display: none;
+                    font-weight: bold;
+                }
+                /* Overall Result Box */
+                .results {
+                    margin-top: 10px;
+                    display: flex;
+                    overflow-x: auto; 
+                    border: 1px solid #ccc; 
+                    background-color: #ccc;
+                    padding: 10px; 
+                    white-space: nowrap; 
+                    height: 500px;
+                    border-radius: 5px;
+                }
+                /* Individual Item Block */
+                .results div {
+                    display: inline-block;
+                    text-align: center;
+                    padding: 10px;
+                    border: 1px rgb(200, 200, 200);
+                    border-radius: 30px;
+                    background-color: #ffffff;
+                    margin: 5px; 
+                    flex: 0 1 150px; 
+                    height: 365px;
+                }
+                /* Keeps hyperlink test coral */
+                .results a {
+                    text-decoration: none; 
+                    color: inherit; 
+                }
+                /* Image Size */
+                .results img {
+                    width: 317px;
+                    height: 275px;
+                    display: block;
+                    margin: 0 auto 10px;
+                    cursor: pointer;
+                }
+                /* Information Block */
+                .results .info {
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center; 
+                    justify-content: flex-start; 
+                    padding: 30px; 
+                    margin-top: 25px;
+                    border-radius: 15px; 
+                    background-color: rgb(255,127,80);
+                    height: 150px; 
+                    box-sizing: border-box; 
+                    font-size: 20px; 
+                    text-align: center;                  
+                }
+                /* Bolds just item name */
+                .results .name {
+                    font-weight: bold;
+                    margin-bottom: 5px; 
+                }
+            </style>
+            <!-- Search Container -->
+            <div class="search-container">
+                <input type="text" id="searchInput"class="search-bar" placeholder="Search for Items">
+                <div id="suggestions" class="suggestions"></div>
+                <div id="noResults" class="no-results">No results found</div>
+                <div id="results" class="results"></div>           
+            </div>
+
+            <script>
+                // Test Data
+                const data = [
+                    { name: "Apple", image: "./assets/images/apple-icon.png", weightOZ: "2.3 oz", weightG: "230g", url: "./make-list.html"},
+                    { name: "Banana", image: "./assets/images/banana-icon.png", weightOZ: "1.3 oz", weightG: "130g", url: "./make-list.html"},
+                    { name: "Strawberry", image: "./assets/images/strawberry-icon.png", weightOZ: "3.4 oz", weightG: "340g", url: "./make-list.html"},
+                    { name: "Pineapple", image: "./assets/images/pineapple-icon.jpg", weightOZ: "5.6 oz ", weightG: "560g", url: "./make-list.html"},
+                    { name: "Blueberry", image: "./assets/images/blueberry-icon.png", weightOZ: "0.6 oz ", weightG: "60g", url: "./make-list.html"},
+                    { name: "Grape", image: "./assets/images/grape-icon.jpg", weightOZ: "4.1 oz ", weightG: "410g", url: "./make-list.html"},
+                ];
+                // Searches for item and updates display
+                function updateResults(){
+                    const query = document.getElementById('searchInput').value.toLowerCase();
+                    const results = data.filter(item => item.name.toLowerCase().includes(query));
+                    const resultsDiv = document.getElementById('results');
+                    const noResultsDiv = document.getElementById('noResults');
+                    const suggestionsDiv = document.getElementById('suggestions');
+                    // Clears display when there is no input
+                    if (query === '') {
+                        resultsDiv.innerHTML = '';
+                        noResultsDiv.style.display = 'none';
+                        suggestionsDiv.innerHTML = '';
+                        updateAutocomplete([]);
+                        return;
+                    }
+                    // No Results Found if not found
+                    if (results.length === 0) {
+                        resultsDiv.innerHTML = '';
+                        noResultsDiv.style.display = 'block';
+                        return;
+                    }
+                    // Updates display
+                    else {
+                    noResultsDiv.style.display = 'none';
+                    resultsDiv.innerHTML = results.map(item => `
+                    <div>
+                        <a href="${item.url}" class="info-link">
+                            <img src="${item.image}" alt="${item.name}">
+                            <div class="info">
+                                <span class ="name">${item.name}</span>
+                                <span>${item.weightOZ}</span>
+                                <span>${item.weightG}</span>
+                            </div>
+                        </a>
+                    </div>
+                    `).join('');
+                    }
+                }
+                // Shows autocompletes suggestions
+                function autocomplete(query) {
+                    if (query === '') return [];
+                    return data.filter(item => item.name.toLowerCase().startsWith(query.toLowerCase()));
+                }
+                function showSuggestions() {
+                    const query = document.getElementById('searchInput').value.toLowerCase();
+                    const suggestions = autocomplete(query);
+                    const suggestionsDiv = document.getElementById('suggestions');
+                    if (query == ''){
+                        suggestionsDiv.innerHTML = '';
+                    }
+                    else {
+                        suggestionsDiv.innerHTML = suggestions.map(item => `<div onclick="selectSuggestion('${item.name}')">${item.name}</div>`).join('');
+                    }
+                }
+                // Updates input if autocomplete is selected
+                function selectSuggestion(name) {
+                    document.getElementById('searchInput').value = name;
+                    document.getElementById('suggestions').innerHTML = '';
+                    updateResults();
+                }
+                // Clear Button
+                document.getElementById('clearButton').addEventListener('click', () => {
+                    document.getElementById('searchInput').value = '';
+                    showSuggestions();
+                    updateResults();
+                });
+                // Updates Results
+                document.getElementById('searchInput').addEventListener('input', () => {
+                    updateResults();
+                    showSuggestions();
+                });
+            </script>
         </main>
     </body>