Click the "native practice" search box to expand the special effect so that you can realize it. How will you realize it?

Click the search button to expand the search input box , If you let it happen, how will you do it ？ Welcome to comment and discuss

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-gpaadC1O-1658297401556)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e6e1a4c20f443719481caac3b5eadea~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

1. Thought analysis

First, analyze the whole search input box to find , We need at least one input box and a search button , So consider putting them in a container , Then add a special class name to the container .active, It is used to distinguish the style when the search box is clicked and not clicked , This container is called .search-container Well

Why add... To a container .active Instead of adding to the input box and search button alone ？ Because after clicking the search button , It's not just about expanding the input box , It also involves changing the position of the search button , All belong to the styles to be processed when the container is activated , So add the class name to .active More suitable for

Then we need to figure out what events are involved in the whole function ：

1. Click the search button
   1. Add a... To the entire container .active Class name , And in css Add a style to this class name in , Increase the width of the input box , Use at the same time transition Add transition effect
   2. Move focus to input In the input box
2. Input box loses focus
   1. After losing focus, the container should be .active Class name removal , Restore the input box and search button to their original state

---

2. HTML structure

According to the above analysis , We can start by writing the whole HTML structure

<div class="search-container">
  <input type="text" class="search-input" placeholder="search..." />
  <button class="btn">
    <i class="fas fa-search"></i>
  </button>
</div> 

The structure is very simple , There's nothing to say

---

3. CSS style

3.1 Search button movement

Because we hope the search button will move , Then there is a problem involved , To whom it should move ？ It must be a container ！ So we first need to position Set to relative, This allows the button to move relative to the container

.search-container {
  position: relative;
  height: 50px;
} 

Because the button is a direct child element of the container , therefore position Set to absolute It will be positioned relative to the container

.btn {
  position: absolute;
  inset: 0 auto auto 0;
  width: 50px;
  height: 100%;
  transition: transform 0.5s ease;
} 

inset: 0 auto auto 0 amount to top: 0; left: 0,auto Equivalent to not setting , Whole inset The four terms of the refer to the above 、 Right 、 Next 、 Left attribute

Because the button position will change , So add the transition Attributes make the transition more natural , Because we are through transform: translateX For position change , So here transition The purpose of this project is transofrm, If the lef Make a position change , Just change it to left that will do

Since you want the button to move , There must be a class name to control , When the class name appears, it moves to a position , When it disappears, it moves back , So write the following pattern ：

.search-container.active .btn {
  transform: translateX(160px);
} 

This means that when the parent container has active Class name , Shift the position of the button to the right 160px

---

3.2 Search the width change of the input box

When the container has active Class name time , Change the width of the input field

.search-container.active .search-input {
  width: 200px;
} 

Then write the complete style of the input box ：

.search-input {
  height: 100%;
  width: 50px;
  border: 0;
  padding: 15px;
  font-size: 24px;
  background-color: #fff;
  transition: width 0.5s ease;
  border-radius: 20px;
} 

Here, because the attributes involved in change are just width, therefore transition The target attribute of the action is width

---

4. JS Handle event listening

4.1 Get elements

First, we need to get the elements involved in the whole function , The search button is definitely needed , Because we want to listen to its click events , The input box is also required , Because we have to monitor its loss of focus blur event , Containers are indispensable , Because our special class name .active Is to add to it

After specifying the element to get , You can write the following code ：

/** @type HTMLElement */
const oBtn = document.querySelector('.btn')
/** @type HTMLElement */
const oSearchInput = document.querySelector('.search-input')
const oSearchContainer = document.querySelector('.search-container') 

It's used here jsdoc The display indicates the type of the element , In this way, you can get explicit type hints , For example, when adding an event listener , Because the default querySelector What you get is Element Object of type , Then there is only fullscreenchange and fullscreenerror Two kinds of [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-l7zoKcgF-1658297401556)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ce06a66e53d442b870d1ab81d2e60e2~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)] If the element type is explicitly declared , You can get more friendly type hints [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-vzGXCKzp-1658297401557)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de3fd0da2a1749dea235ed2dcb4ef1f2~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

---

4.2 Search button click event listener

From the previous analysis, we already know that , First you need to add... To the container .active Class name

secondly , Also focus the element on the input field , This can be done through DOM Element object focus Method realization

/**
 * @description  Click the search button to add... To the container  active  Class name 
 */
const handleBtnClick = () => {
  oSearchContainer.classList.add('active')
  oSearchInput.focus()
} 

---

4.3 Input box loses focus event listener

When the input box loses focus , We should remove the container active Class name , In this way, the corresponding CSS Group elements into

/**
 * @description  Remove container when search input box loses focus  active  Class name 
 */
const handleBlur = () => {
  oSearchContainer.classList.remove('active')
} 

thus , A simple click to expand the search box effect is completed , The complete code is as follows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>hidden-search</title>
  </head>
  <body>
    <div class="search-container">
      <input type="text" class="search-input" placeholder="search..." />
      <button class="btn">
        <i class="fas fa-search"></i>
      </button>
    </div>

    <script src="index.js"></script>
  </body>
</html> 

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #292d3e;
  margin: 0;
  padding: 0;
}

.search-container {
  position: relative;
  height: 50px;
}

.search-input {
  height: 100%;
  width: 50px;
  border: 0;
  padding: 15px;
  font-size: 24px;
  background-color: #fff;
  transition: width 0.5s ease;
  border-radius: 20px;
}

.btn {
  position: absolute;
  inset: 0 auto auto 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
  font-size: 24px;
  border: 0;
  background-color: #fff;
  transition: transform 0.5s ease;
  border-radius: 20px;
}

.btn:focus,
.search-input:focus {
  outline: none;
}

.search-container.active .search-input {
  width: 200px;
}

.search-container.active .btn {
  transform: translateX(160px);
} 

;(() => {
  /** @type HTMLButtonElement */
  const oBtn = document.querySelector('.btn')
  /** @type HTMLInputElement */
  const oSearchInput = document.querySelector('.search-input')
  const oSearchContainer = document.querySelector('.search-container')

  /**
   * @description  Click the search button to add... To the container  active  Class name 
   */
  const handleBtnClick = () => {
    oSearchContainer.classList.add('active')
    oSearchInput.focus()
  }

  /**
   * @description  Remove container when search input box loses focus  active  Class name 
   */
  const handleBlur = () => {
    oSearchContainer.classList.remove('active')
  }

  const bindEvent = () => {
    oBtn.addEventListener('click', handleBtnClick)
    oSearchInput.addEventListener('blur', handleBlur)
  }

  const init = () => {
    bindEvent()
  }

  init()
})()