YUI Auto Complete Suggestion with submission

Question

I have implemented the Auto Complete feature in YUI. But what I would like to do is, when user selects a suggestion, the form should be submitted along with the suggestion

<script>
    YUI().use('array-extras','autocomplete','autocomplete-highlighters',function(Y) {

        function locateModules(response) {
            var results = [];

            if(response && response.dimensions){
                for (var i = 0; i < response.dimensions.length; i++) {
                    if(response.dimensions[i] && response.dimensions[i].refinements){
                        for (var j = 0; j < response.dimensions[i].refinements.length; j++) {
                            if(response.dimensions[i].refinements[j].refinements){
                                results = results.concat(response.dimensions[i].refinements[j].refinements)
                            }
                            results.push(response.dimensions[i].refinements[j]);
                        }
                    }
                }
            }

            return Y.Array.filter(results, function(result) {
                            //some other conditions
                return true;
            });
        }

        Y.one('#searchId').plug(Y.Plugin.AutoComplete, {
            resultHighlighter : 'phraseMatch',
            resultListLocator : locateModules,
            resultTextLocator : 'name',
            source : '<%=autoCompleteURL%>&<portlet:namespace/>q={query}'
        });
});
</script>

and I have form like this

<form ...>
    <input name="searchId" id="searchId" placeholder="Search Product" />
     ......
</form>

The auto-suggestions are coming properly. But when user selects the suggestion, it should be submitted in the form
There's another auto-suggestion box, which actually gets suggestion related to what users is typing as shown below

enter image description here

The Orange color text/categories coming from YUI suggestion, how do I show them as shown in picture. [Tablets, Tablet Cases & Covers are coming from YUI]

[This](http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to) helps I hope. The documentation says a "select" event is fired when user selects a suggestion. — Siva Tumma, Dec 27 '13 at 13:08
@sivatumma, thanks that really helped me to submit the form on selecting the suggestion. But how do I show the search suggestions as per my post? — RaceBase, Dec 30 '13 at 10:00

score 2 · Accepted Answer · edited Jan 01 '14 at 10:06

2

Check nout the following code. I have pasted HTML, JavaScript and CSS separately.

HTML Code

<html>
 <body class="yui3-skin-sam">
   <div class="line">
    <div id="invoice-customer-id">
      <input type="text"  value="x"/>
     </div>
   </div>
  </body>
 </html>

Java script

   YUI().use('node', 'autocomplete', 'autocomplete-highlighters', 'autocomplete-filters', function (Y){
var node = Y.one('input'),
    items = [0,1,2,3,4,5,6,7,8,9,'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'e', 'f'];

node.plug(Y.Plugin.AutoComplete, {
      height: '100px',
      minQueryLength: 0,
      scrollIntoView: true,
      circular: false,
      resultHighlighter: 'phraseMatch',
      resultFilters: 'phraseMatch',
      source: items,
    on : {
    select : function(e) {
        console.log(arguments); //TODO: update your code
    }}
    });
}); // end of javascript

CSS

.line {
 overflow: hidden;
 /* position: relative; */
 }
 .yui3-aclist-content {
   overflow-y: auto;
  }
 #invoice-customer-id {
   padding: 8% 0;
 }

edited Jan 01 '14 at 10:06

RRikesh

14,112
5
49
70

answered Dec 27 '13 at 17:32

shivaP

299
1
2
12

sorry I didn't understand what you have pasted here. I have implemented Auto-completion feature already. Did you check my question? – RaceBase Dec 30 '13 at 09:50
@Reddy: Sorry. I have updated the java script function. For reference:http://jsfiddle.net/ACepn/60/ and http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to – shivaP Dec 30 '13 at 10:08
thanks for that. I have implemented it. Any idea about my second question in the OP – RaceBase Dec 30 '13 at 10:10
For the second question, its based on the source. If you are taking data from data base use LIKE %query string%. so that it'll display all results. I hope the following example will help you http://jsfiddle.net/ACepn/40/ – shivaP Dec 30 '13 at 10:21
I want the auto suggestion appear as shown in the picture. Strictly speaking, i will get results of product Category. So when user selects something, it should be like "ipad in Accessories", assume accessories being populated by YUI and selected by user. – RaceBase Jan 01 '14 at 12:58

YUI Auto Complete Suggestion with submission

1 Answers1