Search Input

Bootstrap Studio Help
1

Hi everyone,

I'm writing to you because the search input command doesn't work... or better maybe it's my fault that I don't understand how it works... in practice I would like the search input to search for terms in the titles of the various articles on the blog

thank you in advance for your help

Tom

2

Presumably you're talking about a search element in one of the template designs.

Bootstrap Studio builds static, "front-end" websites. Blogs and search capabilities require a database and the ability to search the database using back-end functionality. Boootstrap Studio does not do this. The "search" you are seeing in the website design is for appearance only. To make it functional, you would have to create the back-end and code to "connect" it all together.

3

aww ok.. so let's googlin.. sorry but it's my first with BSS , it's difficult? thank you for your help

4

You might want to look at this...

https://programmablesearchengine.google.com/about/

Unless you're building your site with a dynamic builder/CMS (ex. Wordpress, Drupal, Joomla, etc) that uses a database to store and deliver the page content, you won't have a lot of options for "add on" search tools. Google is one solution. I've personally never built a website with an internal search feature because I've never had a client request it. But if I did, I'd probably look at the Google solution.

1 Like
5

WOW this is what i needed

TY really much i appreciate ittt

6

I had this JS code to search other html pages, try it… get back to me if it worked for you…

js
// Define the URL of the Blogger page containing the glossary terms
const glossaryPageUrl = “https://yourpage.html”;

// Fetch terms from the Blogger page
fetch(glossaryPageUrl)
.then(response => response.text())
.then(data => {
// Extract terms from the fetched page
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(data, ‘text/html’);
const terms = Array.from(htmlDoc.querySelectorAll(‘.term’));

  // Function to perform search
  function searchTerms(query) {
    const matchingTerms = terms.filter(term => {
      const termText = term.querySelector('h3').textContent.toLowerCase();
      return termText.includes(query.toLowerCase());
    });
    return matchingTerms;
  }

  // Function to update search results
  function updateSearchResults(query) {
    const resultsContainer = document.getElementById('search-results');
    resultsContainer.innerHTML = '';
    const matchingTerms = searchTerms(query);
    if (matchingTerms.length === 0) {
      resultsContainer.innerHTML = '<p>No matching terms found.</p>';
    } else {
      matchingTerms.forEach(term => {
        const termClone = term.cloneNode(true);
        resultsContainer.appendChild(termClone);
      });
    }
    resultsContainer.style.display = matchingTerms.length > 0 ? 'block' : 'none';
  }

  // Event listener for input change
  const searchInput = document.getElementById('search-input');
  searchInput.addEventListener('input', () => {
    const query = searchInput.value.trim();
    updateSearchResults(query);
  });
})
.catch(error => console.error('Error fetching glossary terms:', error));

/js