JSF2搜索框 [英] JSF2 search box

问题描述

我在javaee6和jsf2中开发了一个小应用程序。我想要一个没有按钮的搜索字段（只需键入并按Enter键并给出结果）。
我在bean中有一个搜索方法：

I develop a little app in javaee6 and jsf2. I want a search field with no button (just type and hit enter and give the result). I have a search method in a bean:

public Book searchByTitle(String title) {
    this.book = bookFacade.searchByTitle(title);
    return book;
}

我想通过jsf页面调用此方法（带参数？是否可能？），所以我尝试这样做：

I want to call this method via jsf page (with parameter? Is it possible?), so I try to do this:

    <h:form>
        <h:inputText id="search" value="#{bookBean.searchString}"></h:inputText>
        <h:commandButton value="Search by title" action="#{bookBean.searchByTitle}">
            <f:ajax execute="search" render="output"></f:ajax>
        </h:commandButton>
        <h2><h:outputText id="output" value="#{bookBean.book.title}"></h:outputText>
        </h2>
    </h:form>

但这不起作用。
在jsf2 xhtml页面中执行搜索字段的正确方法是什么？

But it isn't work. What the proper way to do a search field in a jsf2 xhtml page?

编辑：我尝试使用/不带参数调用searchByTitle函数。

I tried to call the searchByTitle function with/without parameter.

提前致谢！

推荐答案

将以下代码用于jsf页面：

Use the following code to your jsf page:

<h:form>
    <h:inputText id="search" value="#{bookBean.searchString}"></h:inputText>
    <h:commandButton value="Search by title" action="#{bookBean.searchByTitle(bookBean.searchString)}">
        <f:ajax execute="search" render="output"></f:ajax>
    </h:commandButton>
    <h2><h:outputText id="output" value="#{bookBean.book.title}"></h:outputText>
    </h2>
</h:form>

和你的java代码：

// note the return type is String. return type of methods which are to be called from actions of commandlinks or commandbuttons should be string
public String searchByTitle(String title)
{
    this.book = bookFacade.searchByTitle(title);
    return null;
}

编辑：

首先，就涉及从jsf页面传递的参数而言，只有在想要将一个bean的属性传递给另一个bean时才应该使用它。在您的情况下，它不是必需的，因为您正在设置同一个bean的属性（searchString），并将其传递给同一个bean。

First, As far as parameter passing from jsf page is concerned, it should only be used if you want to pass a property of one bean to another bean. In your case, it is not required, since you are setting the property(searchString) of the same bean, and passing it to the very same bean.

您的第二个问题：您希望搜索无需搜索按钮：您可以通过向 h：inputText <添加 valueChangeListener 来实现此目的/ code>。并将 f：ajax 的事件属性设置为 blur

Your second question: you want that search works without search button: You can do this by adding a valueChangeListener to the h:inputText. And set the event attribute of f:ajax to blur

<h:form>
    <h:inputText id="search" value="#{bookBean.searchString}" valueChangeListener="#{bookBean.searchStringChanged}">
        <f:ajax execute="search" render="output" event="blur" />
    </h:inputText>
    <h2><h:outputText id="output" value="#{bookBean.book.title}" />
    </h2>
</h:form>

同时为bookBean java代码定义valueChangeListener方法：

Also define the valueChangeListener method to bookBean java code:

public void searchStringValueChanged(ValueChangeEvent vce)
{
    searchByTitle((String) vce.getNewValue);
}

这篇关于JSF2搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！