开发者

jQuery styled autocomplete with Header/Footer

Is there some Autocomplete jQuery Plugin where I can add some clickable blocks in resultblock? Something like Header or Footer for Results, where I can put some checkboxes and handle the results again开发者_StackOverflow社区.


Easiest way is to extend the jQuery UI Autocomplete with your very own _renderMenu function.

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

});

See a working example here: http://jsfiddle.net/kJUdt/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜