在轨道上自动完成的不显眼的jquery

时间:2011-03-03 21:48:05

标签: jquery ruby-on-rails

我有以下javascript这是一个下拉组合框的想法实现,它基本上就像一个自动完成但我添加了一个按钮,在点击事件处理程序中,我很难搞清楚到底要记下什么。如果搜索输入为空,则按钮的要求是输出数据库中所有项目的可滚动列表,否则将搜索结果输出到相应的搜索项,任何帮助都会做....非常感谢! :

$(document).ready(function(){
    $('input[data-ddcombobox]').railsCombobox();
});

(function( jQuery ){
    var self = null;
    $.fn.railsCombobox = function() {
        return this.live('focus', function(){
            if(!this.railsAutoCompleter){
                this.railsAutoCompleter = new jQuery.railsCombobox(this);
            }
        });
    };
    jQuery.railsCombobox = function(e){
        _e = e;
        this.init(_e);
    };
    jQuery.railsCombobox.fn = jQuery.railsCombobox.prototype = {
        railsCombobox: '0.0.1'
    };  
    jQuery.railsCombobox.fn.extend = jQuery.railsCombobox.extend = jQuery.extend;
    jQuery.railsCombobox.fn.extend({
        init: function(e){
            e.delimiter = $(e).attr('data-delimiter') || null;
            function split( val ){
                return val.split( e.delimiter );
            }
            function extractLast( term ) {
                return split( term ).pop().replace(/^\s+/,"");
            }
            $(e).autocomplete({
                source: function( request, response){
                    $.getJSON( $(e).attr('data-ddcombobox'), {
                        term: extractLast(request.term)
                        }, response );
                    },
                search: function(){
                    // cusom minLength
                    var term = extractLast(this.value);
                    if(term.length < 2){
                        return false;
                    }
                },
                focus: function(){
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ){
                    var terms = split(this.value);
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push(ui.item.value);
                    // add placeholder to get the comma and space at the end
                    if(e.delimiter != null){
                        term.push("");
                        this.value = terms.join(e.delimiter);
                    }else{
                        this.value = terms.join("");
                        if($(this).attr('id_element')){
                            $($(this).attr('id_element')).val(ui.item.id);
                        }
                    };
                    return false;
                }
            });

            ////////////

            this.button = $( "<button type='button'>&nbsp;</button>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .insertAfter(e)
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "ui-corner-right ui-button-icon" )
                .click(function() {
                    // close if already visible
                    $(e).autocomplete("search", "");
                });
            ////////////
        }
    });
})( jQuery );

1 个答案:

答案 0 :(得分:0)

$(e).autocomplete(“search”,$(e).val());

答案是答案。