我已经在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>
  • 自动建议正常进行。但是当用户选择
    建议,应以
  • 的形式提交
  • 还有另一个自动建议框,它实际上得到有关什么的建议
    用户正在键入,如下所示


  • 来自YUI建议的Orange color文本/类别,如何如图所示显示它们。 [平板电脑,平板电脑保护套和保护套来自YUI]

    最佳答案

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

    关于jquery - YUI自动完成建议并提交,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20741801/

    10-12 07:00