2 Replies Latest reply on Feb 28, 2013 10:03 PM by Shriram K M

    Customizing auto-suggest functionality of the search component

    Shriram K M

      Hi,

      Is there any way to customize the auto-suggest functionality of the search component. Is the auto-suggest feature available in the geometrixx website's search bar? If so, where can I access the code for the same?

       

      Thanks in advance

      Shriram

        • 1. Re: Customizing auto-suggest functionality of the search component
          Sham HC Level 7

          Hi Shriram,

           

          You can refer to OOB components which has autocompletion for components like search, tags, etc...  Basically have a minchars configured & delay has been set.

          Which will have listener gets fire the servlet. On the server side SearchField uses the servlet search.json.  What you can do is write your own servlet & in SearchField configure the url to point to your servlet.

           

          Thanks,

          Sham

          1 person found this helpful
          • 2. Re: Customizing auto-suggest functionality of the search component
            Shriram K M Level 1

            Thanks for the pointer Sham HC. I'll take a look into them. The requirement was to have the auto suggest functionality that suggests closest matches to the keyword entered in a textfield on the Page. The catch here is that the matches should be picked from the CRX and not from a file or a database. The OOB Search component didn't have the auto suggest functionality turned on by default and I couldn't work my way through the code of the search component. So one of my superiors came up with an alternate solution that works the following way :

             

            What we have in hand is a textfield in which the user enters the keyword

             

            1. We downloaded a jQuery plugin called coolautosuggest that deals with auto-suggest functionality. The textfieldobject.coolautosuggest(URL) should be invoked on every keyup event on the textfield. This method makes an AJAX call to the URL mentioned as the parameter of the method.

             

            2. The URL could refer to a JSP or a Servlet which implements the search logic by obtaining the request parameter(text entered in the textfield) and uses the input to search for appropriate nodes/properties in the CRX and constructs a JSON array of JSON objects(each JSON object corresponds to a suggestion) and then prints the JSON array.

             

            3. This JSON array is then processed again within the coolautosuggest.js and the suggestions(each JSON object of the JSON array) are rendered one below the other with the required visual effects(using the CSS files).

             

            This alternative works perfectly now although I'll have to dig deeper to find out if there's a simpler way to do this.

             

            Thanks

            Shriram