jquery ui 自动完成堆栈溢出样式

Question

我有兴趣使用 jquery 自动完成构建堆栈溢出样式标签输入。

所以主要的操作是：

1. 如果您输入“a”，将显示带有“a”的查询（没问题，这就是 jquery 自动完成的工作原理）
2. 如果您按下或向上选择推荐，输入框会发生变化。

这里的诀窍是每当输入改变时，只有最后一项改变。

这意味着如果你取输入的值，并选择一个查询，只有

var l = $input.val().split(' ');
l[l.length-1] will be changed

我尝试猴子修补 jquery 自动完成的 _value 函数，但没有成功。我意识到，即使您向上或向下或 esc 移动，输入也会变得混乱。我恳求在这个自动完成方面有经验的人给我一些启示

Answer 1

无论如何，我已经设法理解了源代码并解决了我的问题。

基本上猴子补丁 jquery.autocomplete 的 _value 函数就可以了。

(function( $, undefined ) {

  /* This is the getter and setter of the value
   * When getting, parse and return the last part
   * When setting, just set the last part
   */
  jQuery.ui.autocomplete.prototype._value = function( value ) {
    var originalstr = this.valueMethod.apply( this.element);

    if (arguments.length) { 
      var l = originalstr.split(' ');
      l[l.length -1] = arguments[0];
      this.valueMethod.apply(this.element, [l.join(' ')]);
    }
    else { 
      var l = originalstr.split(' ');
      return l[l.length -1];
    }
  };

} ( jQuery ));

这段代码修改了自动完成获取和设置输入框内的值的方式