javascripthtmlcss
Displaying Hierarchical Search Results with State, City, and Community Name
I am working on a search functionality where users can search for specific towns. However, the expected output should display the state, city, and town in a hierarchical manner.
Current Behavior:
When I typed "town" in the search input field, the result displayed is only "Westmont Town Court".
Expected Behavior: The search result should display in the following hierarchical format:
California ↳ Escondido ↳ Westmont Town Court
The display should resemble the format used in our model site's search feature: first the state, followed by an arrow, then the city, another arrow, and finally the community name.
<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Find a Community Near You" id="myInput" onkeyup="filterFunction()">
<div id="down" class="down">
<ul class="state">
<!-- California -->
<li data-state="California">
<a href="https://mywebsite.com/our-communities/california">California</a>
<ul class="city">
<!-- San Diego -->
<li data-city="San Diego">
<a href="https://myweb.com/our- communities/california/san-diego">San Diego</a>
<ul class="community">
<li><a href="https://myweb.com/our-communities/california/san-diego/westmont-of-carmel-valley/">Westmont of Carmel Valley</a></li>
</ul>
</li>
<script>
function filterFunction() {
let input = document.getElementById("myInput");
let filter = input.value.toUpperCase();
let div = document.getElementById("down");
// Initially, hide everything
let allItems = div.querySelectorAll("li");
allItems.forEach(item => item.style.display = "none");
// Search communities
let communities = div.querySelectorAll(".community > li");
for (let community of communities) {
if (community.textContent.toUpperCase().includes(filter)) {
// If it matches, display the community
community.style.display = "";
// Find and display the parent city
let cityElement = community.closest('[data-city]');
if (cityElement) {
cityElement.style.display = "";
}
// Find and display the parent state
let stateElement = community.closest('[data-state]');
if (stateElement) {
stateElement.style.display = "";
}
}
}
}
</script>
Thank you so much.
Solution
Hiding the entire parent div #down means that the child elements won't show, even if they are individually set to display. I've added more consistent data-city and data-state attributes, and used a hidden class to show and hide the cities and states.
function hideAll() {
document.querySelectorAll(".city li[data-city],.state li[data-state]").forEach(cs => cs.classList.add("hidden"));
}
function filterFunction() {
let input = document.getElementById("myInput");
let filter = input.value.toUpperCase();
let div = document.getElementById("down");
// Initially, hide everything
hideAll();
//let allItems = div.querySelectorAll("li");
// Search communities
let communities = div.querySelectorAll(".community > li");
for (let community of communities) {
if (community.textContent.toUpperCase().includes(filter)) {
// If it matches, display the community
// Find and display the parent city
let cityElement = community.closest('[data-city]');
if (cityElement) {
cityElement.classList.remove("hidden")
}
// Find and display the parent state
let stateElement = community.closest('[data-state]');
if (stateElement) {
stateElement.classList.remove("hidden")
}
}
}
}
hideAll(); .city li {
position: relative;
padding-left: 1px;
}
.city li a {
display: inline-block; /* This might help with the negative margin application */
margin-left: -13px; /* Increase the negative margin */
}
.city li a::before {
content: "";
display: inline-block;
background-image: url(https://mywebsite.com/wp-content/uploads/2023/08/arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
width: 20.4px;
height: 20.4px;
position: absolute;
left: -35px;
top: 40%;
transform: translateY(-50%);
}
/* explore our communities search bar css*/
#myInput {
background-image: url('https://mywebsite.com/wp-content/uploads/2023/08/search.svg');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding-right: 40px; /* Adjust the padding depending on the size of the icon */
transition: background 0.4s;
padding:12px 15px;
}
/* Optionally: Change the icon or its position when the input field is focused */
#myInput:focus {
background-position: right 40px center;
}
.dropdown-content {
position: absolute;
background-color: #f6f6f6;
min-width: 350px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
border-radius: 10px;
}
#down {
overflow-y: auto;
max-height: 240px;
margin-top: 10px;
}
.dropdown-content a {
color: black;
padding: 5px 0px;
text-decoration: none;
display: block;
}
#down ul{
margin: 0em 0 0em 0.5em;
list-style-type: none;
}
/* #down {
display: none;
} */
.hidden {display:none;}
/* our communities css*/
#showmore
{display: none;
padding-left: 20px !important;
padding-right: 20px;
}
#c-button {
font-weight: 500;
color: #FFFFFF;
background-color: #2F6130;
border-color: #2F6130;
font-size: 16px;
margin-top:20px;
margin-left: 100px;
margin-right: 100px;
border-radius: 3px;
padding: 10px;
}
#c-button a{
color:#fff;
}
@media (max-width:768px){
#c-button {
margin-left: 20px;
margin-right: 20px;
}}
#show{
text-decoration:underline;
cursor: pointer;
color: #000;
}
.cta-community a {
display: block;
color:#000;
}
.elementor-cta__content, .elementor-cta__content-item .cta-community {
position: relative;
transition: .5s;
color: #fff;
display: block !important;
}
h3.elementor-cta__title.elementor-cta__content-item.elementor-content-item {
margin-bottom: 10px;
}
ul.sub-menu a:hover {
color: #2f6130 !important;
}
ul.sub-menu a {
color: #000 !important;
}<div>
<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Find a Community Near You" id="myInput" onchange="filterFunction()">
<div id="down" class="down">
<ul class="state">
<!-- California -->
<li data-state="California">
<a href="https://mywebsite.com/our-communities/california">California</a>
<ul class="city">
<!-- San Diego -->
<li data-city="San Diego">
<a href="https://mywebsite.com/our-communities/california/san-diego">San Diego</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/san-diego/westmont-of-carmel-valley/">Westmont of Carmel Valley</a></li>
</ul>
</li>
<!-- Culver City -->
<li data-city="Culver City">
<a href="https://mywebsite.com/our-communities/california/culver-city">Culver City</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/culver-city/westmont-of-culver-city/">Westmont of Culver City</a></li>
</ul>
</li>
<!-- Cypress -->
<li data-city="Cypress">
<a href="https://mywebsite.com/our-communities/california/cypress">Cypress</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/cypress/westmont-of-cypress/">Westmont of Cypress</a></li>
</ul>
</li>
<!-- Encinitas -->
<li data-city="Encinitas">
<a href="https://mywebsite.com/our-communities/california/encinitas">Encinitas</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/encinitas/westmont-of-encinitas/">Westmont of Encinitas</a></li>
</ul>
</li>
<!-- La Mesa -->
<li data-city="La Mesa">
<a href="https://mywebsite.com/our-communities/california/la-mesa">La Mesa</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/la-mesa/westmont-of-la-mesa/">Westmont of La Mesa</a></li>
</ul>
</li>
<!-- Riverside -->
<li data-city="Riverside">
<a href="https://mywebsite.com/our-communities/california/riverside">Riverside</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/riverside/westmont-of-riverside/">Westmont of Riverside</a></li>
<li><a href="https://mywebsite.com/our-communities/california/riverside/westmont-village-homes/">Westmont Village Homes</a></li>
</ul>
</li>
<!-- Chula Vista -->
<li data-city="Chula Vista">
<a href="https://mywebsite.com/our-communities/california/chula-vista">Chula Vista</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/chula-vista/westmont-at-san-miguel-ranch/">Westmont at San Miguel Ranch</a></li>
</ul>
</li>
<!-- Escondido -->
<li data-city="Escondido">
<a href="https://mywebsite.com/our-communities/california/escondido">Escondido</a>
<ul class="community">
<li data-community="Westmont Town Court"><a href="https://mywebsite.com/our-communities/california/escondido/westmont-town-court/">Westmont Town Court</a></li>
</ul>
</li>
<!-- Central California Cities... -->
<!-- Goleta -->
<li data-city="Goleta">
<a href="https://mywebsite.com/our-communities/california/goleta">Goleta</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/goleta/mariposa-at-ellwood-shores/">Mariposa at Ellwood Shores</a></li>
</ul>
</li>
<!-- Fresno -->
<li data-city="Fresno">
<a href="https://mywebsite.com/our-communities/california/fresno">Fresno</a>
<ul class="community">
<li><a href="https://mywebsite.com/communities/central-california/fresno/westmont-of-fresno/">Westmont of Fresno</a></li>
</ul>
</li>
<!-- Nipomo -->
<li data-city="Nipomo">
<a href="https://mywebsite.com/our-communities/california/nipomo">Nipomo</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/nipomo/the-oaks-at-nipomo/">The Oaks at Nipomo</a></li>
</ul>
</li>
<!-- Paso Robles -->
<li data-city="Paso Robles">
<a href="https://mywebsite.com/our-communities/california/paso-robles/">Paso Robles</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/paso-robles/the-oaks-at-paso-robles/">The Oaks at Paso Robles</a></li>
</ul>
</li>
<!-- Northern California Cities... -->
<!-- Brentwood -->
<li data-city="Brentwood">
<a href="https://mywebsite.com/our-communities/california/brentwood/">Brentwood</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/brentwood/westmont-of-brentwood/">Westmont of Brentwood</a></li>
</ul>
</li>
<!-- Morgan Hill -->
<li data-city="Morgan Hill">
<a href="https://mywebsite.com/our-communities/california/morgan-hill">Morgan Hill</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/morgan-hill/westmont-of-morgan-hill/">Westmont of Morgan Hill</a></li>
</ul>
</li>
<!-- Milpitas -->
<li data-city="Milpitas">
<a href="https://mywebsite.com/our-communities/california/milpitas">Milpitas</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/milpitas/westmont-of-milpitas/">Westmont of Milpitas</a></li>
</ul>
</li>
<!-- Pinole -->
<li data-city="Pinole">
<a href="https://mywebsite.com/our-communities/california/pinole">Pinole</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/pinole/westmont-of-pinole/">Westmont of Pinole</a></li>
</ul>
</li>
<!-- Chico -->
<li data-city="Chico">
<a href="https://mywebsite.com/our-communities/california/chico">Chico</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/california/chico/the-inn-at-the-terraces/">The Inn at the Terraces</a></li>
<li><a href="https://mywebsite.com/our-communities/california/chico/the-lodge-at-the-terraces/">The Lodge at the Terraces</a></li>
</ul>
</li>
</ul> <!-- End of California cities -->
</li>
<!-- Oregon -->
<li data-state="Oregon">
<a href="https://mywebsite.com/our-communities/oregon">Oregon</a>
<ul class="city">
<!-- Lincoln City -->
<li data-city="Lincoln City">
<a href="https://mywebsite.com/our-communities/oregon/lincoln-city">Lincoln City</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/oregon/lincoln-city/lakeview-senior-living/">Lakeview Senior Living</a></li>
</ul>
</li>
<!-- Newport -->
<li data-city="Newport">
<a href="https://mywebsite.com/our-communities/oregon/newport">Newport</a>
<ul class="community">
<li><a href="https://mywebsite.com/our-communities/oregon/newport/oceanview-senior-living/">Oceanview Senior Living</a></li>
</ul>
</li>
</ul> <!-- End of Oregon cities -->
</li>
</ul> <!-- End of state list -->
</div>
</div>
</div>
</div>- Apply :focus-visible when focusing element programatically
- Set the background color of the entire webpage (the browser's window)
- Javascript onload and onunload
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to auto-reload files in Node.js?
- How to specify an array of objects as a parameter or return value in JSDoc?
- Initializing an Array with a Single Value
- How to recursively read local files and directories in web browser using File System Access API
- Short circuit Array.forEach like calling break
- encrypt to multiple public keys with RSA using Webcrypto
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- Binary Tree Level Order Traversal using Javascript
- How to wait until an element exists?
- stop iframe from affecting load times
- Is there a simple way to make a HTML relational selection?
- Use JavaScript Code to run Puppeteer from Laravel Controller
- Displaying the number of rows in footer of webix grid
- Javascript Memoization Explanation?
- Resize image with javascript canvas (smoothly)
- Keyboard shortcut to extract local variable in JS/TS in Visual Studio Code
- NextJS 15 loading.tsx not showing
- How to create a react native ios share extension app
- Alternative or polyfill for Array.from on the Internet Explorer
- Mocha and the this context
- How to define an array with conditional elements in react
- Firestore orderBy Timestamp DESC
- changing element in ngOnInit not working when changing route, but is able to access element
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- How to set onClick with JavaScript?