How to create search box with two button under input?

Question

I'm trying to create a search bar with two buttons under input, when user click button A placeholder changed "Search A" and click button B placeholder changed to "Search B".

I'm still new in CSS code. So please guide me to create a search bar like it. I want to create a search bar like this.

This is an example code I want to customize it.

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrap">
   <div class="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
     </button>
   </div>
</div>

I want to put 2 buttons under input.

Answer 1

Hello please check this codepen https://codepen.io/anon/pen/zQRojd?editors=1010 or the snippet below.

though I don't think this is the best way to achieve what you want, but you may want to try.

I added a little javascript function and two sample button

function myFunction(){
	document.getElementById("myText").placeholder = "Button A";
}
function myFunctionTwo(){
	document.getElementById("myText").placeholder = "Button B";
}

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrap">
   <div class="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?" id="myText">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
   </div>
     <button onclick="myFunction()">a</button>
      <button onclick="myFunctionTwo()">b</button>
</div>