Geek Answers Handbook

YUI Auto Complete Offer with Presentation

I implemented the Auto Complete function in YUI. But what I would like to do is when the user selects the offer, the form must be sent along with the offer

<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 such a form

 <form ...> <input name="searchId" id="searchId" placeholder="Search Product" /> ...... </form>
  • Auto offers go right. But when the user selects the offer, it must be presented in the form
  • There is another field for an automatic offer that really receives an offer related to what users type, as shown below.

enter image description here

Text / categories Orange color coming from the YUI sentence, how to show them as shown. [Tablets, tablets and cases come from YUI]

+7
jquery html css yui
source share
1 answer
 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; }
+2
source share

More articles:


All Articles