我已经在 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 建议的 橙色 文本/类别，我如何显示它们，如图所示。 [平板电脑、平板电脑保护套和保护套均来自 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/