2 Replies Latest reply on Mar 13, 2012 5:23 PM by Joe Ferraro

    Autocomplete component not handling multi selection correctly in IE 8

    Joe Ferraro Newbie

      There appears to be a problem with the autocomplete component.  If you go the demo area




      and go to the third option.  In the Box type in "New" and then press the down arrow you will see New Hampshire appear in the autocomplete field.  Press the down arrow again and the autocomplete field will have New Jersey Hampshire showing.  If you continue to press the down arrow each state will be added in front of the previous ones.


      Also if you enter "New H" Hawaii shows up.   The component appears to have a problem with items having spaces within them.


      Has anyone else experienced problems like this?

        • 1. Re: Autocomplete component not handling items with spaces correctly
          Maheswara Sunkara Novice

          its not the component problem, Its depends on the way you implement your bean method to return list of suggested values based on user entered characters..

          • 2. Re: Autocomplete component not handling items with spaces correctly
            Joe Ferraro Newbie

            Thanks for the response but I don't think it is a back bean issue.   I've made a very simple case to try to illustrate the problem taht is found when using IE 8. 


            Here is a simple back bean that supplies a list to the autocomplete field and stores the returned value.



            import java.util.ArrayList;

            import java.util.List;




            public class GeneSearchBean {

                private String[] values = {"ball", "bat", "cat", "car", "dog", "donkey", "elephant", "frog", "fossil", "fire", "pony", "piano"};

                private List<String> listValues = new ArrayList<String>();


                private String searchTerm;


                public String getSearchTerm() {

                    return searchTerm;


                public void setSearchTerm(String searchTerm) {

                    this.searchTerm = searchTerm;




                public List<String> suggest(Object input) {

                    String prefix = (String)input;

                    List<String> listValues = new ArrayList<String>();

                    for (String value: values) {

                        if(value.startsWith(prefix)) {




                    return listValues;


                public List<String> getListValues() {

                    return listValues;


                public void setListValues(List<String> listValues) {

                    this.listValues = listValues;





            I then created the following autocomplete field within a form:


            <rich:autocomplete value="#{geneSearchBean.searchTerm}" mode="ajax" tokens=", "

                 minChars="2" autofill="false" autocompleteMethod="#{geneSearchBean.suggest}" />




            If I enter ba into the field I see the list of ba items.   I can down arrow to an item and press return to select it. (bat)   I can then hit space and press ca and see two items. Again if I down arrow and press return everything appears to work correctly, I have displayed ( bat cat).   Finally if I again press ca and use the mouse to select an item, the first item gets replaced. What I am left seeing is car cat ca.   it appears the selection with a mouse is being handled differently.


            I have breaks set on the back bean and the only method that gets called is the suggest method so I don't see how it can be a back bean issue.   


            Is anyone else seeing this problem or have a solution for it?