带有提交的 YUI 自动完成建议答案

【问题标题】：YUI Auto Complete Suggestion with submission带有提交的 YUI 自动完成建议
【发布时间】：2014-01-01 18:06:55
【问题描述】：

我已经在 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]

【问题讨论】：

This 希望对您有所帮助。文档说当用户选择建议时会触发“选择”事件。
@sivatumma，感谢这确实帮助我提交了选择建议的表格。但是如何根据我的帖子显示搜索建议？

标签： jquery html css yui yui-autocomplete

【解决方案1】：

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

【讨论】：

对不起，我不明白你在这里粘贴了什么。我已经实现了自动完成功能。你检查我的问题了吗？
@Reddy：对不起。我已经更新了 java 脚本函数。供参考：jsfiddle.net/ACepn/60和stackoverflow.com/questions/4713987/…
谢谢。我已经实施了。关于我在 OP 中的第二个问题的任何想法
对于第二个问题，它基于来源。如果您从数据库中获取数据，请使用 LIKE %query string%。这样它就会显示所有结果。希望下面的例子对你有帮助jsfiddle.net/ACepn/40
我希望自动建议如图所示。严格来说，我会得到产品类别的结果。因此，当用户选择某些东西时，它应该类似于“ipad in Accessories”，假设附件由 YUI 填充并由用户选择。