微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery中的“这个”问题

我试图在 jquery ui自动完成中覆盖一个函数.

当我做

$.ui.autocomplete.prototype._create = function() {
    var self = this,doc = this.element[ 0 ].ownerDocument,suppressKeyPress;
    this._value( ... ) ;

我收到了错误._value未定义.

我知道这个背景搞砸了.我该如何解决

我尝试使用$.proxy,但后来我不知道如何引用原始$.ui.autocomplete的内部闭包的上下文.

编辑:

好的,让我打破这个.我想编辑jquery自动完成功能,这样当用户点击自定义内容时,它将忽略它而不是输入它.

最初的问题来自于:JQuery Autocomplete. If item cannot be found,display “Press Enter to insert into autocomplete”?

那么让我们分解一下问题:

我正在扩展这个功能

$.ui.autocomplete.prototype._create = function() {
  console.log(this,$.ui.autocomplete);
  var self = this,suppressKeyPress;

  this.valueMethod = this.element[ this.element.is( "input" ) ? "val" : "text" ];

  this.element
    .addClass( "ui-autocomplete-input" )
    .attr( "autocomplete","off" )
    // Todo verify these actually work as intended
    .attr({
      role: "textBox","aria-autocomplete": "list","aria-haspopup": "true"
    })
    .bind( "keydown.autocomplete",function( event ) {
      if ( self.options.disabled || self.element.attr( "readonly" ) ) {
        return;
      }

      suppressKeyPress = false;
      var keyCode = $.ui.keyCode;
      switch( event.keyCode ) {
      case keyCode.PAGE_UP:
        self._move( "prevIoUsPage",event );
        break;
      case keyCode.PAGE_DOWN:
        self._move( "nextPage",event );
        break;
      case keyCode.UP:
        self._move( "prevIoUs",event );
        // prevent moving cursor to beginning of text field in some browsers
        event.preventDefault();
        break;
      case keyCode.DOWN:
        self._move( "next",event );
        // prevent moving cursor to end of text field in some browsers
        event.preventDefault();
        break;
      case keyCode.ENTER:
      case keyCode.NUMPAD_ENTER:
        // when menu is open and has focus
        if ( self.menu.active ) {
          // #6055 - Opera still allows the keypress to occur
          // which causes forms to submit
          suppressKeyPress = true;
          event.preventDefault();
        }
        //passthrough - ENTER and TAB both select the current element
      case keyCode.TAB:
        if ( !self.menu.active ) {
          return;
        }
        self.menu.select( event );
        break;
      case keyCode.ESCAPE:
        self._value( self.term );
        self.close( event );
        break;
      default:
        // keypress is triggered before the input value is changed
        clearTimeout( self.searching );
        self.searching = setTimeout(function() {
          // only search if the value has changed
          if ( self.term != self._value() ) {
            self.selectedItem = null;
            self.search( null,event );
          }
        },self.options.delay );
        break;
      }
    })
    .bind( "keypress.autocomplete",function( event ) {
      if ( suppressKeyPress ) {
        suppressKeyPress = false;
        event.preventDefault();
      }
    })
    .bind( "focus.autocomplete",function() {
      if ( self.options.disabled ) {
        return;
      }

      self.selectedItem = null;
      self.prevIoUs = self._value();
    })
    .bind( "blur.autocomplete",function( event ) {
      if ( self.options.disabled ) {
        return;
      }

      clearTimeout( self.searching );
      // clicks on the menu (or a button to trigger a search) will cause a blur event
      self.closing = setTimeout(function() {
        self.close( event );
        self._change( event );
      },150 );
    });
  this._initSource();
  this.response = function() {
    return self._response.apply( self,arguments );
  };
  this.menu = $( "<ul></ul>" )
    .addClass( "ui-autocomplete" )
    .appendTo( $( this.options.appendTo || "body",doc )[0] )
    // prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
    .mousedown(function( event ) {
      // clicking on the scrollbar causes focus to shift to the body
      // but we can't detect a mouseup or a click immediately afterward
      // so we have to track the next mousedown and close the menu if
      // the user clicks somewhere outside of the autocomplete
      var menuElement = self.menu.element[ 0 ];
      if ( !$( event.target ).closest( ".ui-menu-item" ).length ) {
        setTimeout(function() {
          $( document ).one( 'mousedown',function( event ) {
            if ( event.target !== self.element[ 0 ] &&
              event.target !== menuElement &&
              !$.contains( menuElement,event.target ) ) {
              self.close();
            }
          });
        },1 );
      }

      // use another timeout to make sure the blur-event-handler on the input was already triggered
      setTimeout(function() {
        clearTimeout( self.closing );
      },13);
    })
    .menu({
      // custom key handling for Now
      input: $(),focus: function( event,ui ) {
        var item = ui.item.data( "item.autocomplete" );
        if ( false !== self._trigger( "focus",event,{ item: item } ) ) {
          // use value to match what will end up in the input,if it was a key event
          if ( /^key/.test(event.originalEvent.type) ) {
            self._value( item.value );
          }
        }
      },select: function( event,ui ) {
        console.log(event,ui);

        var item = ui.item.data( "item.autocomplete" ),prevIoUs = self.prevIoUs;

        // only trigger when focus was lost (click on menu)
        if ( self.element[0] !== doc.activeElement ) {
          self.element.focus();
          self.prevIoUs = prevIoUs;
          // #6109 - IE triggers two focus events and the second
          // is asynchronous,so we need to reset the prevIoUs
          // term synchronously and asynchronously :-(
          setTimeout(function() {
            self.prevIoUs = prevIoUs;
            self.selectedItem = item;
          },1);
        }

        if ( false !== self._trigger( "select",{ item: item } ) ) {
          self._value( item.value );
        }
        // reset the term after the select event
        // this allows custom select handling to work properly
        self.term = self._value();

        self.close( event );
        self.selectedItem = item;
      },blur: function( event,ui ) {
        // don't set the value of the text field if it's already correct
        // this prevents moving the cursor unnecessarily
        if ( self.menu.element.is(":visible") &&
          ( self._value() !== self.term ) ) {
          self._value( self.term );
        }
      }
    })
    .zIndex( this.element.zIndex() + 1 )
    .hide()
    .data( "menu" );
  if ( $.fn.bgiframe ) {
     this.menu.element.bgiframe();
  }
};

这是从jquery.ui.autcomplete.js直接复制的

为方便起见,jQuery自动填充功能发现于https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js

解决方法

而不是试图像这样扩展创建功能,我建议去这里 http://jqueryui.com/demos/autocomplete/#custom-data并查看源.它显示自定义选择事件,这些事件听起来更符合您的需求并且更容易实现.如果所选元素的值为“按Enter键创建此标记”,则只能在select事件中返回false.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐