Search box icon

O.w · July 14, 2021, 8:31am

Ok, so I have this pen of a search box on Codepen…

When it is active and I press the cancel-icon it works and then becomes small again.

But when it is not active(from the start) it works when I press AROUND the icon. But it does not work when I press the exact cacnel-icon. I have to press AROUND it but on the search-circle.

Can somebody tell me what script or so I should add additionally to this code to make it clickable?

Har dto describe what I mean. But below it is active and then it is possible to click the cancel-icon to make the field become small:

But when it is not active it looks like this below. And in that case it is only possible to click around the icon to make the search field become active:

Codepen:

jsdisco · July 14, 2021, 9:23am

With your current code, you have two elements that can receive click events:

a click on the big circle opens the search bar
a click on the little icon closes it

You can attach both events to the big circle, and add some logic to decide whether the search bar should open or close (see code below).

You can remove the event listener on the cancel-icon altogether, and make sure to remove pointer events from it in the CSS, so you can “click through” it:

.search-box .cancel-icon {

  /* remove this */
  cursor: pointer;

  /* add this */
  pointer-events: none;
}

JavaScript:

// create a boolean to keep track of the state of the search bar
let isSearchbarOpen = false;

searchBtn.onclick = () => {

    // if search bar is closed, open it (and set isSearchbarOpen to true)

   if (!isSearchbarOpen) {
    isSearchbarOpen = true; 
    searchBox.classList.remove("active");
    searchBtn.classList.remove("active");
    searchInput.classList.remove("active");
    cancelBtn.classList.remove("active");
    cancelBtn.classList.remove("active");
    searchData.classList.toggle("active");
    searchInput.value = "";
    
  } else {

    // if search bar is open, close it (and set isSearchbarOpen to false)

    isSearchbarOpen = false;
    searchBox.classList.add("active");
    searchBtn.classList.add("active");
    searchInput.classList.add("active");
    cancelBtn.classList.add("active");
    searchInput.focus();
    if (searchInput.value != "") {
      var values = searchInput.value;
      searchData.classList.remove("active");
      searchData.innerHTML =
        "You just typed " +
        "<span style='font-weight: 500;'>" +
        values +
        "</span>";
    } else {
      searchData.textContent = "";
    }
  }
};

O.w · July 14, 2021, 11:36pm

Ah ok.

Weird thing that happened was that it went the other way around now. When I used that code it was possible to click the one that is not active from the beginning. But not the active one.

When I added the Javascript nothing worked anymore for some reason.

lasjorg · July 14, 2021, 11:49pm

I’m not so sure you actually need the divs, have you tried this using just the svg? You can give it a white background, padding, and border radius, then switch the background color as needed.

I didn’t really test it or anything, but I’m thinking you can do this with just the svg.

jsdisco · July 15, 2021, 4:34am

I’ve tested it so it works with your code. As mentioned, you have to remove the event listener on the cancel-icon, and also remove cursor:pointer and put pointer-event:none instead. Otherwise, you 'd end up with the scenario you described (that it goes the other way around).

O.w · July 15, 2021, 8:33am

The event listener is the Javascript correct?

jsdisco · July 15, 2021, 8:54am

You attach event listeners with onclick for example. The pattern is

element.onclick = callbackFunction

So this part (you can safely remove the whole thing):

cancelBtn.onclick = () =>{
        searchBox.classList.remove("active");
        searchBtn.classList.remove("active");
        ...
      }

… attaches a click event listener to the cancelBtn, and provides a callback function, which will execute whenever a click event happens on the element.

If you check out my code above, I’ve moved the callback function body (everything that was inside the curly braces) into the callback of the click event listener of the searchBtn.

O.w · July 15, 2021, 10:49pm

I removed those but I am still not able to get an active cancel icon. The whole thing is basically “turned around” instead. So I am able to open the thing but I am not able to “close” the search bar again. So it is basically turned.

jsdisco · July 16, 2021, 7:21am

I’m not sure what you’re doing wrong because you haven’t updated the pen.

I’ll post the whole script again so you can copy/paste it (delete everything else from your script):

      const searchBox = document.querySelector(".search-box");
      const searchBtn = document.querySelector(".search-icon");
      const searchInput = document.querySelector("input");
      const searchData = document.querySelector(".search-data");
      const cancelBtn = document.querySelector(".cancel-icon");
      let isSearchbarOpen = false;
      searchBtn.onclick = () => {
        // if search bar is closed, open it (and set isSearchbarOpen to true)
        if (!isSearchbarOpen) {
          isSearchbarOpen = true;
          searchBox.classList.remove("active");
          searchBtn.classList.remove("active");
          searchInput.classList.remove("active");
          cancelBtn.classList.remove("active");
          cancelBtn.classList.remove("active");
          searchData.classList.toggle("active");
          searchInput.value = "";
        } else {
          // if search bar is open, close it (and set isSearchbarOpen to false)
          isSearchbarOpen = false;
          searchBox.classList.add("active");
          searchBtn.classList.add("active");
          searchInput.classList.add("active");
          cancelBtn.classList.add("active");
          searchInput.focus();
          if (searchInput.value != "") {
            var values = searchInput.value;
            searchData.classList.remove("active");
            searchData.innerHTML =
              "You just typed " +
              "<span style='font-weight: 500;'>" +
              values +
              "</span>";
          } else {
            searchData.textContent = "";
          }
        }
      };

CSS:

.search-box .cancel-icon{
  position: absolute;
  right: 10px;
  left: 220px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #fff;
  pointer-events:none;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 40;
}

O.w · July 16, 2021, 7:54am

jsdisco:

const searchBox = document.querySelector(".search-box");
      const searchBtn = document.querySelector(".search-icon");
      const searchInput = document.querySelector("input");
      const searchData = document.querySelector(".search-data");
      const cancelBtn = document.querySelector(".cancel-icon");
      let isSearchbarOpen = false;
      searchBtn.onclick = () => {
        // if search bar is closed, open it (and set isSearchbarOpen to true)
        if (!isSearchbarOpen) {
          isSearchbarOpen = true;
          searchBox.classList.remove("active");
          searchBtn.classList.remove("active");
          searchInput.classList.remove("active");
          cancelBtn.classList.remove("active");
          cancelBtn.classList.remove("active");
          searchData.classList.toggle("active");
          searchInput.value = "";
        } else {
          // if search bar is open, close it (and set isSearchbarOpen to false)
          isSearchbarOpen = false;
          searchBox.classList.add("active");
          searchBtn.classList.add("active");
          searchInput.classList.add("active");
          cancelBtn.classList.add("active");
          searchInput.focus();
          if (searchInput.value != "") {
            var values = searchInput.value;
            searchData.classList.remove("active");
            searchData.innerHTML =
              "You just typed " +
              "<span style='font-weight: 500;'>" +
              values +
              "</span>";
          } else {
            searchData.textContent = "";
          }
        }
      };

Cool I think it worked. BUT…

Some weird duplicate arised on the left as well. So now there are two. Where should I remove that in the code?

jsdisco · July 16, 2021, 9:28am

Duplicate? I don’t see any duplicates but apparently you’ve changed something else in the CSS, because the search icon is now outside of the circle.

I’d put the icon inside the circle and center it with flex, that would make your life easier:

<div class="search-icon">
    <svg version="1.1" class="cancel-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="375.045 607.885 30.959 30.33" enable-background="new 375.045 607.885 30.959 30.33" xml:space="preserve">
         <path fill="#494949" d="M405.047,633.805l-7.007-6.542c-0.129-0.121-0.267-0.226-0.408-0.319c1.277-1.939,2.025-4.258,2.025-6.753 c0-6.796-5.51-12.306-12.307-12.306s-12.306,5.51-12.306,12.306s5.509,12.306,12.306,12.306c2.565,0,4.945-0.786,6.916-2.128 c0.122,0.172,0.257,0.337,0.418,0.488l7.006,6.542c1.122,1.048,2.783,1.093,3.709,0.101 C406.327,636.507,406.169,634.853,405.047,633.805z M387.351,629.051c-4.893,0-8.86-3.967-8.86-8.86s3.967-8.86,8.86-8.86 s8.86,3.967,8.86,8.86S392.244,629.051,387.351,629.051z" />
    </svg>
 </div>

To center it, make the search-icon a flex-container with justify-content:center and align-items:center.

Also, remove all transforms and position:absolute from the cancel-icon.

You’ll probably have to tweak your animations a little afterwards.

O.w · July 21, 2021, 8:30am

I have tried to do that. But now I am all confused. Because it looks totally weird

Also, my socials have disappeared. But I do not really know why. Because I have them on another website, which I think have the same code.

jsdisco · July 21, 2021, 1:33pm

It worked perfectly before with the few little changes I made, but now you’ve changed so much that it’s a little difficult to repair. You also have so much unused CSS that it’s hard to understand what’s what and where.

If you can undo all the changes and put the pen back to where it was, I can check again.

system · January 20, 2022, 1:33am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.