0

I am writing a search menu that searches for and shows on the page all matching substrings in a string on pure js. I made the search on page, but I don't know how to display the results in the search drop-down menu with the number of results like on picture use only js. My code and picture below:

const input = document.querySelector('input')
const paragraphs = document.querySelectorAll('p')

input.addEventListener('input', e => {
  const searchTerm = e.target.value
  const regex = new RegExp(searchTerm, 'g')
  const replacement = `<span class="highlighted">${ searchTerm }</span>`

  for (const p of paragraphs) {
    p.innerHTML = p.innerText.replace(regex, replacement)
  }
})
:root {
  --primary-color: crimson;
  --dark-color: #013;
  --light-color: whitesmoke;
}

body {
  color: var(--dark-color);
  background-color: var(--light-color);
  padding: 1rem;
}

header {
  text-align: center;
}

main {
  max-width: 567px;
  margin: 0 auto;
}

.search__container {
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
}

.search__input {
  border: 2px solid var(--dark-color);
  padding: 1rem;
  text-align: center;
}

.search__input:hover,
.search__input:focus {
  outline: none;
  border-color: var(--primary-color);
  -webkit-box-shadow: 0 0 5px 0.1px var(--primary-color);
          box-shadow: 0 0 5px 0.1px var(--primary-color);
}

.highlighted {
  text-shadow: 0 0 6px var(--primary-color);
  color: var(--primary-color);
}
    <section class="search__container">
      <input class="search__input" type="text" spellcheck="false" placeholder="search..." />
    </section>
    <section>
      <div class="paragraphs">
   
            <div id="p"><p>Buffalofish sawtooth </p>
<p>eel tigerperch, john dory sleeper,</p> 
  <p>Spanish mackerel </p>
<p>sockeye salmon sturgeon </p>
  <p>gray mullet bottlenose. </p>
<p>Banjo catfish wallago; deep </p>
<p>sea smelt titan triggerfish </p>
<p>Australian grayling threadfin </p>
<p>bighead carp longnose lancetfish </p>
<p>pineconefish. Pipefish mojarra </p>
<p>northern pearleye cutthroat trout </p>
<p>sand diver; freshwater shark wrasse. </p></div>

      </div>
    </section>

enter image description here

2 Answers 2

1

I wrote this code, which allows you to count the number of words in your text that have your search term. AND you get a dynamic list of words that contain your search term. (I touch only HTML and JS files)

Hint: If you want to have the dynamic list more "beautiful" change the <div id="listFound"></div> with list tags, like <ul> and <li> but keep the id="listFound"

const input = document.querySelector('input')
const paragraphs = document.querySelectorAll('p')

input.addEventListener('input', e => {
document.getElementById('listFound').textContent = "" //init after each additional letter
  const searchTerm = e.target.value
  const regex = new RegExp(searchTerm, 'g')
  const replacement = `<span class="highlighted">${ searchTerm }</span>`

  for (const p of paragraphs) {
    p.innerHTML = p.innerText.replace(regex, replacement)
  }
  
  /*ADD*/
  string_to_array(document.getElementById('p').textContent)
  checkWords(searchTerm)
  
  let text = document.getElementById('p').textContent
  let separator = searchTerm
  let number = WordCount(text, separator)
  document.getElementById('result').textContent = number
  if(searchTerm === ""){
    document.getElementById('listFound').textContent = ""
    document.getElementById('result').textContent = 0
  }
})
/*ADD 3 functions*/

var arrayFromWords = []
function string_to_array(str) {
     arrayFromWords = str.trim().split(" ");
}


function checkWords(searchTerm){
 arrayFromWords.forEach(element => {
    if(element.includes(searchTerm)){
  document.getElementById('listFound').textContent += element
  }
 })
}

function WordCount(str, separator) { 
  return (str.split(separator).length -1);
}
:root {
  --primary-color: crimson;
  --dark-color: #013;
  --light-color: whitesmoke;
}

body {
  color: var(--dark-color);
  background-color: var(--light-color);
  padding: 1rem;
}

header {
  text-align: center;
}

main {
  max-width: 567px;
  margin: 0 auto;
}

.search__container {
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
}

.search__input {
  border: 2px solid var(--dark-color);
  padding: 1rem;
  text-align: center;
}

.search__input:hover,
.search__input:focus {
  outline: none;
  border-color: var(--primary-color);
  -webkit-box-shadow: 0 0 5px 0.1px var(--primary-color);
          box-shadow: 0 0 5px 0.1px var(--primary-color);
}

.highlighted {
  text-shadow: 0 0 6px var(--primary-color);
  color: var(--primary-color);
}
<section class="search__container">
      <input class="search__input" type="text" spellcheck="false" placeholder="search..." />
      <div id="result"></div> <!--ADD-->
      <div id="listFound"></div>
    </section>
    <section>
      <div class="paragraphs">
   
            <section>
  <div class="paragraphs">
   
    <div id="p"><p>Buffalofish sawtooth </p>
    <p>eel tigerperch, john dory sleeper,</p> 
  <p>Spanish mackerel </p>
<p>sockeye salmon sturgeon </p>
  <p>gray mullet bottlenose. </p>
<p>Banjo catfish wallago; deep </p>
<p>sea smelt titan triggerfish </p>
<p>Australian grayling threadfin </p>
<p>bighead carp longnose lancetfish </p>
<p>pineconefish. Pipefish mojarra </p>
<p>northern pearleye cutthroat trout </p>
<p>sand diver; freshwater shark wrasse. </p></div>


  </div>
</section>


      </div>
    </section>

2
  • So you modified the paragraph by cutting it into several <p> in the <div id="p">. But I didn't understand your question :/
    – zerbene
    Oct 26, 2020 at 16:34
  • I think I solve your problem with this edit: Get a dynamic list of the words that contain your searchTerm
    – zerbene
    Oct 26, 2020 at 17:11
1

Maybe like this:

var input = document.querySelector('input');
var p = document.querySelectorAll('p');

input.addEventListener('input', e => {
  var value = input.value;
  p.forEach(p => {
    if (!p.innerText.includes(value)) {
      p.style.display = 'none';
    } else {
      p.style.display = 'block';
    }
    p.innerHTML = p.innerText.replace(value, '<span>'+value+'</span>')
  })
})
:root {
  --primary-color: crimson;
  --dark-color: #013;
  --light-color: whitesmoke;
}

body {
  color: var(--dark-color);
  background-color: var(--light-color);
  padding: 1rem;
}

header {
  text-align: center;
}

main {
  max-width: 567px;
  margin: 0 auto;
}

.search__container {
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
}

.search__input {
  border: 2px solid var(--dark-color);
  padding: 1rem;
  text-align: center;
}

.search__input:hover,
.search__input:focus {
  outline: none;
  border-color: var(--primary-color);
  -webkit-box-shadow: 0 0 5px 0.1px var(--primary-color);
  box-shadow: 0 0 5px 0.1px var(--primary-color);
}

.paragraphs span {
  text-shadow: 0 0 6px var(--primary-color);
  color: var(--primary-color);
}
<section class="search__container">
  <input class="search__input" type="text" spellcheck="false" placeholder="search..." />
</section>
<section>
  <div class="paragraphs">
    <p>Google Maps</p>
    <p>Google Photos</p>
    <p>Google Translate</p>
    <p>Google Earth</p>
    <p>Google Lens</p>
  </div>
</section>

2
  • Thanks, this is a good solution, but it doesn't work a little for me - I need to display the search result on the page without changing the page content in the drop-down box
    – All In
    Oct 26, 2020 at 10:50
  • @zerbene Last question: I changed the blocks by splitting them. How can you display in the drop-down box <p> which fit? Logically, if a string is included in <p> ny, then a class is assigned to it
    – All In
    Oct 26, 2020 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.