auto complete functionality on products selected

Question

vf page:

 <apex:page controller="Searchwords">
            <apex:form >
                <apex:pageBlock >
                    <apex:pageBlockSection title="criteria">
                              <apex:outputLabel value="Enter Name Snippet"/>
                              <apex:inputText value="{!nameQuery}"/>
                              <apex:commandButton action="{!executeSearch}" value="Search"/>

                    </apex:pageBlockSection>

                       <apex:pageBlockTable value="{!product}" var="acc">
              <apex:column headerValue="Name">
                 <apex:outputLink value="/{!acc.id}/e?retURL={!URLENCODE('/apex/RetUrlSearchPage?query='+nameQuery)}">{!acc.Name}</apex:outputLink>
              </apex:column>
              <apex:column value="{!acc.ProductCode}"/>

                       </apex:pageBlockTable>
                </apex:pageBlock>
            </apex:form>
        </apex:page>

================================================================================= controller:

public class Searchwords {

    public String nameQuery {get;set;}
    public List<Product2> product{get;set;}
      public PageReference executeSearch() {
      String queryStr= nameQuery + '%';
       product = [select id,Name, ProductCode from Product2 where name like :queryStr];
            return null;
        }


        public String getproduct() {
            return null;
        }

    public Searchwords (){
        String urlQuery = ApexPages.currentPage().getParameters().get('query');
    }
    }

I am getting records based on alphabets, but i want an auto search if u type "a" all products related to "a" must come in sequential order and i want to select one product among "a" and then i want to get infn related to that product only. how can i achieve this by modifing the prgm. please some one help me out.

Answer 1

One of my teammates built a bomber autocomplete typeahead widget and bundled it into a Visualforce component. The component accepts a number of custom attributes to set options for the widget. It's a great little piece of code, worth exploring for your use case:

https://github.com/SalesforceFoundation/visualforce-typeahead

Answer 2

You're going to need to approach the problem with Javascript, one way or another. If you try and do this in Apex you're going to be running a new query every time someone enters a letter, and further, you will probably still want to use some sort of javascript event to tell the controller to update the page with the new info. That would eat through queries very quickly and not perform well at all.

Many developers like to use JQueryUI to add simple javascript elements like AutoComplete. Here is an example from the JQueryUI AutoComplete Module page. Click 'View Source' to see the example.

You'll notice that the available options are stored in a javascript array :

 var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

Now, you'll need to get your data into the javascript variable somehow. Take a look at this example. You'll need to do something like this inside your VF page so you can get the data from the controller to the javascript in your page.

<script>
    var s = [];
    <apex:repeat value="{!product2List}" var="product">
        s.push('{!JSENCODE(product)}');
    </apex:repeat>    
</script>

And you'll need to populate your query with all the products that you are filtering when you are loading the page. If you have a lot of records this won't perform well but the scope of the response is not suitable for the question you answered. One simple way to do that would be to include:

In your controller you can do something like this to load up all the "Product" then your javasript can filter it like is demonstrated in the link above.

In your controller:

public class SearchProducts {
    public List<String> product2List { get; set; }

    //controller populates product2List on pageload:
    public SearchProducts() {
        product2List = [select id,Name, ProductCode from Product2 where name like :queryStr];
    }
}

Now, there is a lot more work to be done but frankly this is a pretty big question and I don't have time to "do your homework" for you but hopefully this will give you an idea about how to approach this problem and you can find other examples that take you the rest of the way. You've asked a very large question and JQueryUI is probably the easiest way to approach it with the best documentation and community around it. Good luck.