【问题标题】:Jquery in Chrome extensions and Chome browser works differentChrome 扩展和 Chome 浏览器中的 Jquery 工作方式不同
【发布时间】:2013-12-05 05:44:23
【问题描述】:

您好,我正在编写 Chrome 离线扩展程序。我知道我不能包含 JS 内联。这段代码来自一个 jquery 小部件,它可以在浏览器上完美运行……但在应用程序中却不行。我猜这与$.widget("custom.combobox", {_create: function() {},_createAutocomplete: function() {}, ... );有关 我在一个不起作用的小部件的其他文件中遇到了类似的问题。检查一个小时后,我删除了这行代码$( "#tags" ).autocomplete({ minLength: 0, source: availableTagsForFiles });(在浏览器上完美运行)并再次运行。 我正在使用谷歌浏览器来处理所有事情。 我认为如果我以不同的方式写这个$.widget("custom.combobox", {_create: function() {},_createAutocomplete: function() {}, ... ); 会更正。但我不知道 jquery 足以做到这一点。 (这只是一个假设)。有人可以帮我吗?

不工作的脚本:
$(文档).ready(函数($){ console.log("再见,残酷的世界!"); $.widget("custom.combobox", { _创建:函数(){ this.wrapper = $( "" ) .addClass("自定义组合框") .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", "" )
                      .attr( "id", "EscribeCssTextbox" )
                      .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                      .focus(cargaTodosLosIdsClasesYElementos)
                      .keyup(ocupaCambio)
                      .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();
                  }
                });
              });




              $(document).ready(function() {
                console.log("BUAAAAAAAAAAA I'LL cry !!");
                $( "#combobox" ).combobox();
                $( "#toggle" ).click(function() {
                  $( "#combobox" ).toggle();
                });
              });

【问题讨论】:

    标签: javascript jquery google-chrome-extension


    【解决方案1】:

    我在项目中的团队得到了这个错误的解决方案,在 Chrome 应用程序中使用小部件时使用这个“”: $.widget("custom.combobox", {"_create": function() {},"_createAutocomplete": function() {}, ... );

    使用该 Jquery 小部件显示正确。好吧,只是一个不起作用的例外: .autocomplete({ "delay": 0, "minLength": 0, "source": $.proxy( this, "_source" ) })

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-05-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-13
      • 2023-02-06
      • 1970-01-01
      • 2015-04-02
      相关资源
      最近更新 更多