0

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.

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Wins
  • 1
  • 2
  • Please add details about the efforts you have done to solve the problem. – akg179 May 16 '20 at 21:17
  • Can you please provide a [mcve]. It would be good to know where the data is saved? What type of data is it? etc. This [javascript highlighting](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) may help you. – fuggerjaki61 May 17 '20 at 08:44
  • My advice would be to buy the jsf for javaee8 book by Bauke Scholtz (BalusC) – Kukeltje May 17 '20 at 13:27
  • Is this enough? @akg179 – Wins May 18 '20 at 15:13
  • @fuggerjaki61 it is String[]. I think I can work it out after opening your link, but I wonder how to use javascript in JSF. – Wins May 18 '20 at 15:17
  • @Kukeltje thanks, I'll check it out after this pandemic end. – Wins May 18 '20 at 15:18
  • If you wonder how to use Javascript with JSF you should take some tutorials (or books) how to use them – fuggerjaki61 May 18 '20 at 16:45
  • Does this answer your question? [How to highlight text using javascript](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) – fuggerjaki61 May 18 '20 at 18:23

0 Answers0