我正在使用ui自动完成插件,除了代码插入“body”并且我需要将它放在另一个类下之外,一切都很好。
snip 愚蠢的编辑。
我正在使用基本的jquery ui自动完成插件http://jqueryui.com/demos/autocomplete/,但它会将代码插入到正文的底部。
有什么想法吗?
由于
答案 0 :(得分:0)
很难说出你在问什么。 您在文本框周围构建了一个jQuery UI自动完成:
<input id="project" />
基本上,您可以将标签放在任何地方。 然后你必须使用jQuery创建自动完成:
$("#project").autocomplete();
我为你准备了fiddle。
或者你可以运行:
var projects = [{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
}, {
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
}, {
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}];
$("#project").autocomplete({
minLength: 0,
source: projects,
focus: function(event, ui) {
$("#project").val(ui.item.label);
return false;
},
select: function(event, ui) {
alert(ui.item.desc);
return false;
}
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
};
#myDiv {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div id="myDiv">
<label for="project">projects (j to see results):</label>
<input id="project" />
</div>