How to make search result like Google in JSF? - jsf

Question

So, I want to display search result as I type the keyword and change the color of the search result text in JSF like when you use Google to search.
Search example (WhatsApp)
I've done the keyup part but still wonder how to apply highlight text using javascript in JSF.
Here is my xhtml code
<h:form>
<h:outputLabel value="Keyword "/>
<h:inputText id="key" value="#{bookList.keyword}" style="height: 22px">
<f:ajax event="keyup" render="search"/>
</h:inputText>
<h:commandButton value="SEARCH" action="index" styleClass="buttonSearch"/>
</h:form>
<br/>
<h:dataTable value="#{bookList.books}" var="book" id="search"
class="book-table"
headerClass="book-table-header">
<h:column>
#{book.title}
</h:column>
<h:column>
#{book.author}
</h:column>
</h:dataTable>
and this is my java code...
Constructor
public class Book {
private String title;
private String author;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public Book(String title, String author){
this.title = title;
this.author = author;
}
}
Data
#ManagedBean
#RequestScoped
public class BookList {
private String keyword = "";
public String getKeyword() {
return keyword;
}
public void setKeyword(String keyword) {
this.keyword = keyword;
}
private List<Book> books = new ArrayList<Book>(
Arrays.asList(
new Book("My First Learn to Write Workbook", "Crystal Radke"),
new Book("Where the Crawdads Sing", "Delia Owens"),
new Book("Little Fires Everywhere: A Novel", "Celeste Ng"),
new Book("Fortitude: American Resilience in the Era", "Dan Crenshaw"),
new Book("Arguing the Socialists", "Glenn Beck"),
new Book("Hidden Valley Road: Inside the Mind of an American Family", "Robert Kolker")
)
);
public List<Book> getBooks() {
if (keyword.equals("")) {
return books;
} else {
List<Book> listSearch = new ArrayList<Book>();
for(Book book:books){
if(book.getAuthor().toLowerCase().contains(keyword.toLowerCase())
|| book.getTitle().toLowerCase().contains(keyword.toLowerCase())){
listSearch.add(book);
}
}
return listSearch;
}
}
}
Sorry, if my question isn't nice.