CODEWITHSUNDEEP
jqueryhtmldatatable
john
john

Reputation: 157

Make icon searchable

I have font awesome spans however I am using data tables which have a search bar. Here is my code:

<td><i class="fa fa-circle red_star"></i><i class="fa fa-circle yellow_star"></i><i class="fa fa-circle green_star" aria-hidden="true"></i></td>
<td><span class='gray_star' id='<?= $p->id?>' ><i class="fa fa-star"></i></span></td>

Is there a way that if i type "red" in my search bar, the red star will display and if I type green, green star with show and etc?

Upvotes: 1

Views: 41

Answers (1)

mplungjan
mplungjan

Reputation: 178340

Something like this?

$(function() {

  $("#x").on("input",function() {
    var val = this.value;
    if (["red","yellow","green"].indexOf(val) !=-1) {
      $(".star").hide();
      $("."+val+"_star").show();
    }
    else {
      $(".star").show();
    }
  })
})
.red_star { color:red; }
.yellow_star { color:yellow; }
.green_star { color:green;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<input id="x" type="text" />
<table>
<tr>
<td>
<i class="fa fa-circle red_star star"></i>
<i class="fa fa-circle yellow_star star"></i>
<i class="fa fa-circle green_star star" aria-hidden="true"></i></td>
<td><span class='gray_star' id='<?= $p->id?>' >
<i class="fa fa-star"></i></span></td>
</tr>
</table>

Upvotes: 1

Related Questions