YUI自動提交完整建議

我已經在YUI中實現了自動完成功能。但我想要做的是，當用戶選擇一個建議，形式應與建議YUI自動提交完整建議

<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>

一起提交，我有形式這樣

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

的自動建議正在妥善處理。但是，當用戶選擇建議，應在形式
提交的還有另一種自動意見箱，實際上得到與用戶什麼是打字建議如下圖所示

enter image description here

來自YUI建議的Orange color文本/類別，我如何顯示它們如圖所示。 [片，藥盒&封面是從YUI來]

來源

2013-12-23 Reddy

[This]（http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to）幫助我希望。該文檔說當用戶選擇一個建議時會觸發「select」事件。 –

@sivatumma，謝謝你真的幫我提交了關於選擇建議的表單。但是，如何根據我的帖子顯示搜索建議？ – Reddy

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

HTML代碼

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

Java腳本的

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; 
}

來源

2013-12-27 17:32:07 shivaP

對不起，我不明白你粘貼在這裏。我已經實現了自動完成功能。你檢查我的問題嗎？ – Reddy

@Reddy：對不起。我已經更新了Java腳本功能。作爲參考：http：//jsfiddle.net/ACepn/60/和http://stackoverflow.com/questions/4713987/yui-autocomplete-events-how-to – shivaP

謝謝你。我已經實現了它。任何關於我的第二個問題的想法在OP – Reddy

YUI自動提交完整建議

回答

相關問題