<div class="demo-container">
<div class="container-form">
<form action="" method="post" class="d-flex flex-sm-row flex-column align-items-center justify-content-center"> 
<select name="search_option" class="form-select">
<option value="song" <?php echo ($_POST['search_option']=='song'?'selected':'')?>>Song Title</option>
<option value="artist" <?php echo ($_POST['search_option']=='artist'?'selected':'')?>>Artist</option>
<option value="year" <?php echo ($_POST['search_option']=='year'?'selected':'')?>>Year</option>
</select> 
<input name="search" id="search" class="form-control me-1 shadow-none search-input" autocomplete="off" type="search" aria-label="Search" 
value="<?php if(isset($_POST['search'])) echo $_POST['search'];?>" >
<input id="button_search" type="submit" name="submit" class="btn btn-secondary btn-search" value="Search"> 
</form>
</div> 
<?php

if(isset($_POST['submit'])){ 
  $search_value = $_POST["search"]; 

if(($_POST['search_option']) == "song") {
  $option_selected = "song";
  echo '<div class="mwd-search-info">Song title: “<span class="highlight-01">'.$search_value.'</span>”</div>'; 
} 

if (($_POST['search_option']) == "artist") { 
  $option_selected = "artist";
  echo '<div class="mwd-search-info">Artist “<span class="highlight-02">'.$search_value.'</span>”</div>'; 
}

if (($_POST['search_option']) == "year") { 
  $option_selected = "year";
  echo '<div class="mwd-search-info">Year “<span class="highlight-03">'.$search_value.'</span>”</div>'; 
} 

}
?> 
<div class="container-results"> 

<?php
$conn = new mysqli ("server", "user", "password", "database");
mysqli_set_charset ($conn, "utf8");

if ($conn -> connect_error) {
  die ("Error: " . $conn->connect_error);
} 

if(isset($_POST['submit'])) {
  $sql = "SELECT * FROM top_5000_songs WHERE ".$option_selected." LIKE '%$search_value%' LIMIT 0, 40";
  $result = $conn -> query($sql);

if ($result -> num_rows > 0) {
  echo "<table id=\"table-demo\" class=\"table table-striped\">";
  echo "<thead>";
  echo "<tr>";
  echo "<th>Song Title</th>";
  echo "<th>Artist</th>";
  echo "<th>Year</th>";
  echo "</tr>";
  echo "</tbody>";
  echo "<tbody>"; 
  
while ($row = $result -> fetch_assoc()) {

  $song = $row["song"];
  $artist = $row["artist"];
  $year= $row["year"];
  
if(($_POST['search_option']) == "song") {
  $song = preg_replace("/($search_value)/i", '<span class="highlight-01">$1</span>', $song); 
} 

else if(($_POST['search_option']) == "artist") {
  $artist = preg_replace("/($search_value)/i", '<span class="highlight-02">$1</span>', $artist); 
}

else if(($_POST['search_option']) == "year") {
  $year= preg_replace("/($search_value)/i", '<span class="highlight-03">$1</span>', $year); 
} 

  echo "<tr>";
  echo "<td>" . $song . "</td>";
  echo "<td>" . $artist . "</td>";
  echo "<td>" . $year. "</td>"; 
}

  echo "</tr>";
  echo "</tbody>";
  echo "</table>"; 
} 

else {
  echo "No records found";
} 
}
$conn -> close();
?> 
</div>
</div>

.demo-container {
  margin: 0 auto;
  max-width: 1200px;
}

.btn-search {
  margin-left: -20px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
} 

.btn-search::before {
  content: "\f002";
  font-family: FontAwesome;
  color: #FFFFFF;
  float: left;
}

.search-input {
  padding-right: 40px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  width: 300px;
  outline: none !important;
} 

.form-select {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  width: 120px;
  background-color: #F0F0F0;
  outline: none !important;
}

.mwd-search-info {
  margin: 2em 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #ECECEC;
}

.highlight-01 {
  color: #FF6F50;
  font-weight: 600;
} 

.highlight-02 {
  color: #F8C536;
  font-weight: 600;
} 

.highlight-03 {
  color: #25CED1;
  font-weight: 600;
} 

.dataTables_paginate {
  margin-top: 20px;
} 

textarea:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
.form-select:focus, .btn:focus { 
  border-color: rgba(208, 212, 218, 0.9); 
  box-shadow: none !important;
  outline: 0 none !important;
} 

@media only screen and (max-width: 600px) { 
.form-select {
  width: 100%;
  margin-bottom: 1em;
} 

.btn-search {
  margin-left: 0;
  margin-top: 1em;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  width: 100%;
}

.search-input {
  padding-right: 0;
  border-right: 1px solid rgba(208, 212, 218, 0.9);
  border-left: 1px solid rgba(208, 212, 218, 0.9);
  border-radius: 4px;
  width: 100%;
  outline: none !important;
} 
}