douren6874
2013-06-14 17:19 阅读 72

Drupal中的jQuery UI组合框实现

I'm having some issues trying to get a jQuery UI combo box to work on a drupal instance. The druapl install is Drupal 7 out of the box with jQuery Update and jQuery plugins module installed and enabled, as well as the php filter enabled and set on the node I am using. jQuery update is set to use jQuery 1.8 and CDN to google.

jQuery UI combobox: http://jqueryui.com/autocomplete/#combobox

The issue I am experiencing is that the combo box does not have the select arrow drop down and therefore the select functionality cannot be used. As well, when I begin to type in the combo box, the auto complete popup shows, but it is not located under the combo box, but instead appears in the upper left hand corner of the view port. Also, the toggle button does not have any functionality.

Firebug reports the following errors:

On page load:

TypeError: q.push is not a function at https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js (line 2)

On focus of the combo box:

uncaught exception: Cannot find tooltip for [object Object]

On Key Press:

TypeError: b.curCSS is not a function at https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js (line 13)

Relevant Code:

<?php
    drupal_add_library('jquery_plugin', 'tooltip');

    drupal_add_library('system', 'ui.widget');
    drupal_add_library('system', 'ui.mouse');
    drupal_add_library('system', 'ui.button');
    drupal_add_library('system', 'ui.position');
    drupal_add_library('system', 'ui.autocomplete');
?>

 <script>
    (function( $ ) {
        $.widget( "custom.combobox", {
            _create: function() {
                this.wrapper = $( "<span>" )
                    .addClass( "custom-combobox" )
                    .insertAfter( this.element );

                this.element.hide();
                this._createAutocomplete();
                this._createShowAllButton();
            },

            _createAutocomplete: function() {
                var selected = this.element.children( ":selected" ),
                    value = selected.val() ? selected.text() : "";
                this.input = $( "<input>" )
                    .appendTo( this.wrapper )
                    .val( value )
                    .attr( "title", "" )
                    .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: $.proxy( this, "_source" )
                    })
                    .tooltip({
                        tooltipClass: "ui-state-highlight"
                    });

                $(this).on( this.input, {
                    autocompleteselect: function( event, ui ) {
                        ui.item.option.selected = true;
                        this._trigger( "select", event, {
                            item: ui.item.option
                        });
                    },
                    autocompletechange: "_removeIfInvalid"
                });
            },

            _createShowAllButton: function() {
                var input = this.input,
                    wasOpen = false;

                $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .tooltip()
                .appendTo( this.wrapper )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "custom-combobox-toggle ui-corner-right" )
                .mousedown(function() {
                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                })
                .click(function() {
                    input.focus();

                    // Close if already visible
                    if ( wasOpen ) {
                        return;
                    }

                    // Pass empty string as value to search for, displaying all results
                    input.autocomplete( "search", "" );
                });
            },

            _source: function( request, response ) {
                var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                response( this.element.children( "option" ).map(function() {
                    var text = $( this ).text();
                    if ( this.value && ( !request.term || matcher.test(text) ) )
                        return {
                            label: text,
                            value: text,
                            option: this
                        };
                    })
                );
            },

            _removeIfInvalid: function( event, ui ) {

                // Selected an item, nothing to do
                if ( ui.item ) {
                    return;
                }

                // Search for a match (case-insensitive)
                var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    valid = false;
                this.element.children( "option" ).each(function() {
                    if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                // Found a match, nothing to do
                if ( valid ) {
                    return;
                }

                // Remove invalid value
                this.input
                    .val( "" )
                    .attr( "title", value + " didn't match any item" )
                    .tooltip( "open" );
                this.element.val( "" );
                this._delay(function() {
                    this.input.tooltip( "close" ).attr( "title", "" );
                }, 2500 );
                this.input.data( "ui-autocomplete" ).term = "";
            },

            _destroy: function() {
                this.wrapper.remove();
                this.element.show();
            }
        });
    })( jQuery );

    (function( $ ) {
        $(document).ready(function() {
            $( "#combobox" ).combobox();
            $( "#toggle" ).click(function() {
                $( "#combobox" ).toggle();
            });
        });
    })(jQuery);
</script>

<div class="ui-widget">
<label>Your preferred programming language: </label>
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">Show underlying select</button>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    dougou7782 dougou7782 2013-06-17 16:39

    The solution to my issue was a combination of things. First there is a difference between using the CDN and local copies in jQuery Update. local files are split into there different segments where the CDN contains all of the jQuery UI extensions. So Secondly the drupal_add_library statements at the top of the file were duplicating and causing issues.

    My final configuration consisted of no drupal_add_library statements. jQuery Update set to 1.8, production and no CDN. A manual update of the sites/all/modules/jquery_update/replace/ui/ui/minified/jquery.ui.core.min.js file from 1.8.11 to 1.10.3 by copy and pasting the contents (not the best solution).

    点赞 评论 复制链接分享
  • douxiong3245 douxiong3245 2013-06-14 18:26

    I think you have some jquery version issue... please check the thread Jquery ui combobox (autocomplete) disappears

    may it will help you.

    点赞 评论 复制链接分享

相关推荐