4
是否有一些自动完成jQuery插件,我可以在结果块中添加一些可点击的块?像Header或Footer for Results,我可以放置一些复选框并再次处理结果。jQuery风格的自动填充与页眉/页脚
是否有一些自动完成jQuery插件,我可以在结果块中添加一些可点击的块?像Header或Footer for Results,我可以放置一些复选框并再次处理结果。jQuery风格的自动填充与页眉/页脚
最简单的方法是使用您自己的_renderMenu函数来扩展jQuery UI Autocomplete。
http://jqueryui.com/demos/autocomplete/#default
HTML:
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
的jQuery:
$(function() { //DOM Ready
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$.widget("custom.customcomplete", $.ui.autocomplete, {
// our fancy new _renderMenu function adds the header and footers!
_renderMenu: function(ul, items) {
var self = this;
$.each(items, function(index, item) {
if (index == 0)
ul.append('<li><input type="checkbox"> I\'m at the top! Choose me!</li>');
self._renderItem(ul, item);
if(index == items.length - 1)
ul.append('<li><input type="checkbox"> I\'m at the bottom! Choose me!</li>');
});
}
});
// note the new 'widget', extended from autocomplete above
$("#tags").customcomplete({
source: availableTags
});
});
看到这里工作的例子:http://jsfiddle.net/kJUdt/
伟大的答案,真是帮了我很多很多的感谢 – LenPopLilly 2012-04-26 10:04:40
我建议使用append/prepend运算符而不是“if”和“check length”: '_renderMenu:function(ul,items){ var that = this; ul.prepend('