How to change color of searched text when a value is entered

Question

Is there any way such that when user enters any value in search box then it's color is changed .

Like this :
User enters : laptop
Then laptop color changes from the class="deviceNameCardHead"

I have made a search box but don't know how to change the color of searched item

function refree() {
  var reed = document.getElementById("search").value;
  var reed1 = reed.toLowerCase();
  var reader = document.getElementsByClassName("deviceNameCardHead")

  for (let i = 0; i < reader.length; i++) {
    if (reader[i].innerHTML.toLowerCase().indexOf(reed1) > -1) {
      document.getElementById("demo").innerHTML = "Yes";
      document.getElementById("demo1").innerHTML = " - "+ reed1;
      reader[i].parentElement.style.display = "block";
    } else {
      document.getElementById("demo").innerHTML = "No";
      document.getElementById("demo1").innerHTML = "-"+ reed1;
      reader[i].parentElement.style.display = "none";
    }
  }

}

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it" oninput="refree()">
    <br>
    <span id="demo"></span>
    <span id="demo1"></span>
  </div>

  <div class="deviceNameCard">
    <h3 class="deviceNameCardHead">Lenova Yoga Laptop Pro</h3>
  </div>

</div>

I have tried a search query which search in the `class="deviceNameCardHead"` but don't know how to change the color of searched item — Rana Daggubati, Sep 04 '21 at 10:11
If you need to change or add a class then that has been asked many many times. Do a search. Also show us in your code what you have tried. — wazz, Sep 04 '21 at 10:12
@wazz not change or add class but to change the style of word searched according to search box — Rana Daggubati, Sep 04 '21 at 10:14
Is [this](https://stackoverflow.com/q/57931853) what you're after? — Nick Parsons, Sep 04 '21 at 10:18
It is not in that way but I might use it thanks for help @NickParsons — Rana Daggubati, Sep 04 '21 at 10:21
Are you looking for this. https://bitsofco.de/a-one-line-solution-to-highlighting-search-matches/ — anonimostilton, Sep 04 '21 at 10:23
Don't edit your question to a new one, instead ask a new one ;) — Amini, Sep 04 '21 at 16:36
Please feel free to refine your question, but do not fundamentally change it. You were asking about highlighting text. — JDB, Sep 04 '21 at 16:40
I asked in same question because I am prohibited to ask more question @AmirrezaAmini — Rana Daggubati, Sep 04 '21 at 16:44

score 0 · Answer 1 · answered Sep 04 '21 at 12:12

I think You are trying to do this:-

function refree() {
  var reed = document.getElementById("search").value;
  var reed1 = reed.toLowerCase();
  var reader = document.getElementsByClassName("deviceNameCardHead")

  for (let i = 0; i < reader.length; i++) {
    if (reader[i].innerHTML.toLowerCase().indexOf(reed1) > -1) {
      document.getElementById("demo").innerHTML = "Yes";
      document.getElementById("demo1").innerHTML = " - " + reed1;
      reader[i].parentElement.style.display = "block";
      reader[i].parentElement.classList.add("mystyle");
    } else {
      document.getElementById("demo").innerHTML = "No";
      document.getElementById("demo1").innerHTML = "-" + reed1;
      reader[i].parentElement.style.display = "none";
      reader[i].parentElement.classList.remove("mystyle");
    }
  }

}

.mystyle {
  color: red;
}

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it" oninput="refree()">
    <br>
    <span id="demo"></span>
    <span id="demo1"></span>
  </div>

  <div class="deviceNameCard">
    <h3 class="deviceNameCardHead">Lenova Yoga Laptop Pro</h3>
  </div>

</div>

you are almost there @Hedayat but I only want to color the part which is written in search box — Rana Daggubati, Sep 04 '21 at 12:22

score 0 · Answer 2 · answered Sep 04 '21 at 16:35

Of course, in my opinion, making navbar with flexbox is the best way.

The only thing you need to do is to separate them. So you have to put Cancel & Apply in a parent element called .filterCA and justify .filterBottomBtns to space-between. (I gave display flex to .filterCA to make the buttons inline).
You can also give margin-right: auto to Reset which would separate itself from right side and will stick to the left side.

.filterBottomBtns {
  position: sticky;
  display: flex;
  /* EDITED HERE */
  justify-content: space-between;
  align-items: center;
  width: 100%;
  bottom: 0;
  padding: 2%;
  border-radius: 0 0 5px 5px;
  background-color: white;
  border-top: 1px solid rgb(209, 208, 208);
}

.filterReset {
  font-size: 16px;
  /*
  margin-right: auto;
  */
  margin-left: 5%;
  padding: 6px 20px;
  border: 1px solid white;
  border-radius: 3px;
  background-color: white;
  color: rgb(13, 113, 121);
}

.filterReset:hover {
  background-color: rgb(18, 192, 204, 0.3);
}

/* EDITED */
.filterCA {
  display: flex
}

.filterCancel {
  font-size: 16px;
  margin-right: 2%;
  padding: 6px 25px;
  border-radius: 3px;
  border: 1px solid rgb(216, 215, 215);
  background-color: white;
  color: rgb(13, 113, 121);
}

.filterCancel:hover {
  border: 1px solid rgb(100, 100, 100);
  background-color: rgb(18, 192, 204, 0.3);
}

.filterApply {
  margin-right: 5%;
  font-size: 16px;
  padding: 6px 25px;
  border: 1px solid rgb(18, 192, 204);
  border-radius: 3px;
  background-color: rgb(18, 192, 204);
  color: white;
}

.filterApply:hover {
  border: 1px solid rgb(15, 128, 136);
  background-color: rgb(15, 128, 136);
}

<div class="filterBottomBtns">
  <button type="reset" class="filterReset">Reset</button>
  <div class="filterCA">
    <button class="filterCancel">Cancel</button>
    <button class="filterApply">Apply</button>
  </div>
</div>

brother I have another problem which is like this : When I am using `` my code is running alright but when I use `` It is not behaving as expected instead it reload the page on click on it . Can you shine light on this . Plz — Rana Daggubati, Sep 04 '21 at 17:51
It is running alright when I use `type="button"` with `button tag` . Can you tell me about this behavior — Rana Daggubati, Sep 04 '21 at 17:54

How to change color of searched text when a value is entered

2 Answers2