0

I am new to primefaces and I want to use autocomplete tag of primeface.So i folllowed this example.
Here is my code

layout.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<head>

<title>Title</title>
</head>
<body>
<h:form id="form">  
    <p:panel header="AutoComplete" toggleable="true" id="panel">
        <h:panelGrid columns="2" cellpadding="5">  

            <h:outputLabel value="Simple :" for="acSimple" />  
            <p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}"   
                    completeMethod="#{autoCompleteBean.complete}"/>
                    </h:panelGrid>
                    </p:panel>
                    </h:form>
</body>
</html>

AutoCompleteBean.java

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="autoCompleteBean")
@RequestScoped
public class AutoCompleteBean {  

    private String txt1;  

    public List<String> complete(String query) {  
        List<String> results = new ArrayList<String>();  

        for (int i = 0; i < 10; i++) {  
            results.add(query + i);  
        }  

        return results;  
    }  

    public String getTxt1() {  
        return txt1;  
    }  

    public void setTxt1(String txt1) {  
        this.txt1 = txt1;  
    }  
}

so layout.xhtml renders fine and show me a text field but after then it don't work and not showing autocomplete functionality.
Is there something missing? or what would be the problem
Thanks

khan
  • 2,664
  • 8
  • 38
  • 64

3 Answers3

1

The xhtml you have posted is using standard html tags for head and body so it may not be correctly interpreting the Javascript used to call the complete method in the bean.

Try using h:head and h:body.

The tip-off may show up in your output window. Check for something like:

sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)]

See the Stack Overflow discussion on h:head in primefaces: What's the difference between <h:head> and <head> in Java Facelets?

Community
  • 1
  • 1
MikeG
  • 423
  • 4
  • 7
0

You should always use h:head and h:body when you are writing facelets. The reason is that in order for the auto complete to work javascript is required and if you don't include h:head jsf will not be able to put the javascript correctly.

Sandeep Panda
  • 723
  • 6
  • 9
0

I had a similar problem, however in my case the problem was resolved when I removed a p tag which was surrounding the p:autocomplete tag.

The following code will not throw an error message, but the autoselect dropdown menu won't appear. After removing the <p></p> everything works fine.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:form>
        <p>
            <p:autoComplete id="place" value="#{addPlaceBean.place}"
                completeMethod="#{autoCompletePlace.completePlace}" var="place"
            itemLabel="#{place.city}, #{place.country}"
            itemValue="#{place}" converter="placeConverter">
            </p:autoComplete>
        </p>
    </h:form>
</h:body>
</html>
Nik
  • 26
  • 3
  • Are you really, really sure? I cannot imagine this. Wasn't there any css on the p tag that caused problems? – Kukeltje Oct 06 '17 at 10:38
  • I tried it now with a minimal example (see above) and the problem is still the same. – Nik Oct 06 '17 at 15:46