MySQL

Search by an option

HTML & PHP

<section class="sbao-section-input">
<div class="row d-flex flex-sm-row flex-column align-items-center justify-content-center"> 
<form action="" method="post">
<div class="sbao-container-search-input"> 
<div class="input-group">
<input name="search" id="search" class="form-control sbao-input-search sbao-single-space-only" 
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 sbao-btn-search" value="Search">
</div>
</div> 
<div class="sbao-btn-options-container">
<div class="row justify-content-between sbao-container-radio-buttons"> 
<div class="col-md-3 sbao-col-radio-button"> 
<input type="radio" name="songs" id="radio-01" value="song" checked="checked" <?php if($_POST['songs'] == 'song' ){echo "checked";}?> >
<label for="radio-01">Title</label>
</div>
<div class="col-md-3 sbao-col-radio-button"> 
<input type="radio" name="songs" id="radio-02" value="artist" <?php if($_POST['songs'] == 'artist' ){echo "checked";}?> >
<label for="radio-02">Artist</label>
</div> 
<div class="col-md-3 sbao-col-radio-button"> 
<input type="radio" name="songs" id="radio-03" value="year" <?php if($_POST['songs'] == 'year' ){echo "checked";}?> >
<label for="radio-03">Year</label>
</div> 
</div>
</form> 
</div> 
</section> 
<section class="sbao-section-results"> 
<?php
if(isset($_POST['submit'])){ 
$search_value = $_POST["search"]; 
if(($_POST['songs']) == "song") {
$option_selected = "song"; 
} 
if (($_POST['songs']) == "artist") { 
$option_selected = "artist";
}
if (($_POST['songs']) == "year") { 
$option_selected = "year";
} 
}
?> 
<?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 "<div class=\"sbao-container-results\">";
echo "<table id=\"table-songs\" 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['songs']) == "song") {
$song = preg_replace("/($search_value)/i", '<span class="sbao-highlight-results-01">$1</span>', $song); 
} 
else if(($_POST['songs']) == "artist") {
$artist = preg_replace("/($search_value)/i", '<span class="sbao-highlight-results-02">$1</span>', $artist); 
} 
else if(($_POST['songs']) == "year") {
$year= preg_replace("/($search_value)/i", '<span class="sbao-highlight-results-03">$1</span>', $year); 
} 
echo "<tr>";
echo "<td>" . $song . "</td>";
echo "<td>" . $artist . "</td>";
echo "<td>" . $year. "</td>"; 
}
echo "</tr>";
echo "</tbody>";
echo "</table>"; 
echo "</div>";
} 
else {
echo "No records found";
} 
}
$conn -> close();
?>
<?php // ===== ?>

CSS

.sbao-section-input {
  margin: 0 auto;
  max-width: 900px;
}

.sbao-section-results {
  margin: 0 auto;
  max-width: 900px;
  padding-top: 2em;
}

.sbao-container-results {
  padding: 1em;
}

.sbao-container-search-input {
  padding: 1em;
}

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

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

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

.sbao-btn-options-container {
  padding: 1em;
}

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

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

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

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;
}

.sbao-container-content-search {
  padding: 20px;
}

.sbao-container-radio-buttons {
  margin: 1em 0;
  padding: 0;
}

.sbao-col-radio-button input {
  display: none;
}

.sbao-col-radio-button label {
  display: block;
  position: relative;
  padding: 10px 20px 4px 40px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.30);
  color: rgba(0, 0, 0, 0.30);
  cursor: pointer;
  text-align: right;
}

.sbao-col-radio-button label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0, 0, 0, 0.30);
  border-radius: 100%;
}

.sbao-col-radio-button label:hover, input:focus+label {
  border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
  color: rgba(0, 0, 0, 1.00);
}

.sbao-col-radio-button label::before:hover {
  border: 2px solid rgba(0, 0, 0, 0.60);
  color: rgba(0, 0, 0, 1.00);
}

.sbao-col-radio-button label:hover::before {
  border: 2px solid rgba(0, 0, 0, 0.60);
}

.sbao-col-radio-button input:checked+label {
  border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
  color: rgba(0, 0, 0, 0.90);
}

.sbao-col-radio-button input:checked+label::before {
  position: absolute;
  font-family: 'FontAwesome';
  font-size: 14px;
  content: '\f00c';
  background: rgba(255, 255, 255, 0.80);
  border: 2px solid rgba(0, 0, 0, 0.60);
  color: rgba(0, 0, 0, 1.00);
  font-weight: bold;
  text-align: center;
}

.dataTables_paginate {
  margin-top: 20px;
}