风名博客

jquery之如何扩展 jQuery 插件

Tue, 28 Jul 2026 14:54:31 +0800

我想创建一个 jQuery 插件来包装图表组件。它将具有 addLineSerie 或 addBarsSerie 等功能。然后我想创建其他插件来扩展这个插件以添加新功能或覆盖所需的内容，但仍然能够调用原始插件功能。

我从下面的方法开始。它有点有效，但是，正如我后来意识到的那样，我无法调用原始的“父”实现(如果我创建 myB 的实例，我无法调用 myA.goA2)。

(function($){ 
    $.fn.myA = function(settings) { 
        this.goA = function() {alert("goA: "+settings);}; 
        this.goA2 = function() {alert("goA2: "+settings);}; 
        return this; 
    }; 
})(jQuery); 
 
(function($){ 
    $.fn.myB = function(settings) { 
        this.myA(settings); 
        this.goA2 = function() {alert("goA2B: "+settings);}; 
        this.goB = function() {alert("goB: "+settings);}; 
        return this; 
    }; 
})(jQuery);

所以我有两个问题:

这种方法正确吗？还是我应该采用不同的方式？
如何使“父级”和“子级”成为同一实例并调用“父级”的实现？

谢谢。

请您参考如下方法:

这似乎是正确的，但是要实现跨插件行为，你不能这样做:

(function($) { 
    $.fn.myA = function(settings) { 
        this.goA = function() { 
            alert("goA: " + settings); 
        }; 
        this.goA2 = function() { 
            alert("goA2: " + settings); 
        }; 
        return this; 
    }; 
})(jQuery); 
 
(function($) { 
    $.fn.myB = function(settings) { 
        this.myA = $.fn.myA(settings); 
        this.goA2fromA = function() { 
            this.myA.goA2(); 
        }; 
        this.goA2 = function() { 
            alert("goA2B: " + settings); 
        }; 
        this.goB = function() { 
            alert("goB: " + settings); 
        }; 
        return this; 
    }; 
})(jQuery); 
 
$(document).ready(function() { 
    var a = $('#one').myA({}); 
    var b = $('#one').myB({}); 
    a.goA2(); 
    b.goA2fromA(); 
});

编辑:修复了对 myA 的调用并添加了将进行的调用。查看工作 fiddle :

http://jsfiddle.net/PqQgs/4/

jQuery 追加顺序

Tue, 28 Jul 2026 14:54:31 +0800

虽然很简单，但我就是不明白为什么这不起作用。

我需要将一个 div append 到文档正文，然后再次添加相同 div 的副本但隐藏，然后添加另一个 div，然后再次添加另一个相同 div 的副本但隐藏，依此类推...

    $.each(myObj.items, function(i, item) { 
 
        // createItem simply finds an html fragment in the document, 
        // clones it and returns it 
        var $i = createItem(item); 
 
        // add a div first that clears floats - this is needed before every item 
        $('body').append('<div class="clear"/>'); 
 
        // append a clone of the html fragment 
        $('body').append($i.clone()); 
 
        // add another div that clears floats 
        $('body').append('<div class="clear"/>'); 
 
        // append a clone of the html fragment but hide it 
        $('body').append($i.clone().addClass('hidden')); 
 
    });

我期待:

    <body> 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
        ... 
    </body>

但是我明白了..

    <body> 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
 
        <div class="clear"/> 
        <div class="item">item</div> 
 
        <div class="clear"/> 
        <div class="item hidden">item</div> 
        ... 
    </body>

为什么第一个会跳过？

编辑

我的源 html 是这样的:

    <html> 
        <body> 
            <div class="template hidden">..</div> 
        </body> 
    </html>

我克隆模板 div，将其返回到我的函数，添加一个 div (class='clear')，然后添加返回的 div 的克隆，然后添加另一个 div (class='clear')，然后添加返回的另一个克隆分区

我的列表中的项目不超过 5 个。

编辑2

愚蠢的用户错误...代码工作正常。我没有意识到我的第一行是硬编码的而不是自动生成的。

对不起大家...(感觉很愚蠢)

请您参考如下方法:

您是否正在克隆一组现有的 div？ IE。您的页面上已经有一个克隆，因此您的函数会克隆并添加一个常规克隆，然后添加另一个隐藏克隆。

jquery之jQuery 原型(prototype)代码(bind(this) 与闭包)

Tue, 28 Jul 2026 14:54:31 +0800

大家早上好。

我正在将原型(prototype)代码重写为 JQuery 插件，但不知道如何处理这一部分:

this.observers = events.map(function(name) { 
   var handler = this["on" + name.].bind(this); 
   this.element.observe(name, handler); 
   return { name: name, handler: handler }; 
}.bind(this));

我最终得到:

this.observers = $.each(events , function(i, name) { 
   var handler = "on"+name; 
   $element.live({ 
      name: handler 
   }); 
}

我完全错了？我不太了解原型(prototype) bind() 的目的。

感谢您的帮助!

编辑:它的上下文是一个插件 init() 函数，我在其中附加“动态”事件及其编码为私有(private)方法的处理程序...

plugin.init = function() { 
 
    // the plugin's final properties are the merged default and user-provided options (if any) 
    plugin.settings = $.extend({}, defaults, options); 
 
if (!plugin.observers) { 
    var events = ("mouseover mouseout").split(" "); 
 
    plugin.observers = $.map(events, $.proxy(function(name) { 
        var handler = $.proxy(this['on' + name], this); 
        $element.bind(name, handler); 
        return { name: name, handler: handler }; 
    }, this)); 
 
} 
console.log(plugin.observers); 
}

请您参考如下方法:

至于原型(prototype)到 jQuery 的翻译(首先阅读我上面关于绑定(bind)/代理的解释)，这应该与上面的代码片段紧密匹配:

this.observers = $.map(events, $.proxy(function(name) { 
  var handler = $.proxy(this['on' + name], this); 
  this.element.bind(name, handler); 
  return { name: name, handler: handler }; 
}, this));

我从原型(prototype)片段中假设:

this 是一个原型(prototype)类或一个普通的 JS 对象，它是当前上下文。
this.element 是对 DOM 元素的引用，在 jQuery 情况下是 jQuery 包装的 DOM 元素。
onclick、onfocus 和类似的可能回调是 this 上下文中的方法。

如果没有进一步说明您的代码如何工作或您试图重写 Prototype 插件的哪一部分，这就是我能为您提供的帮助(我希望这已经足够了)。

ajax之IE9 中的 jQuery AJAX 请求不发送 Cookie header

Tue, 28 Jul 2026 14:54:31 +0800

我正在使用 jQuery 的 ajax .get 方法从我的服务器检索数据。在 Chrome 中工作完美，但在 IE9 中它不发送 Cookie header ，这会破坏应用程序。知道为什么吗？这是 jQuery 代码:

$.get(this.server + 'rest/photo/' + this.profileId + '/count', function(data) { 
    $('#imageCount').html(data); 
});

请您参考如下方法:

我这里也有同样的问题，我无法让 jQuery .ajax() 函数工作。我发现的唯一解决方法是:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

您可以将此元标记添加到页面顶部以使其正常工作。但感觉不是一个好的解决方案。我认为问题在于 IE9 中的 xmlhttprequest 对象不同，因此 jQuery 无法找到相应的对象，因此 ajax 不会触发。

jquery之生成下载文件时出现友好的等待消息

Tue, 28 Jul 2026 14:54:31 +0800

我正在调用一个生成 Excel 文件的 Web 服务，完成后用户可以下载该文件。生成此文件大约需要 20 秒。有没有一种方法使用 jQuery 向用户提供一些反馈，除了状态栏之外，他们还必须等待几秒钟。我不喜欢在服务器端保存或缓存文件。

我希望像下面这样的东西会起作用，但显然它不会

   var myhref = "DownloadFile.ashx?foo=bar" 
   $.get(myhref, function (data) { 
            window.location = this.href; 
        }, 
        function (data) { 
            alert("Could not generate file"); 
 
        });

所以我想要的是在生成下载时保持用户界面处于事件状态

请您参考如下方法:

当我想用ajax执行一些操作时，我遇到了类似的问题，这些操作不需要太多时间，但足以让用户思考“发生了什么事？它正在做我想要的事情吗？”。

我发现了一个名为 blockUI 的 jQuery 插件(真的很酷!)当你处理你的东西时，会显示一条消息。

这是我的使用方法。首先是处理请求的函数:

function proceedToSend( requesterName, requesterId ) 
{ 
    //Here the wait/processing message is displayed 
    $().ajaxStart($.blockUI({ message:$('#waitMessage')})); 
 
    $.ajax({ 
        type    :"POST" , 
        url     : http://example.com/myurl.php 
        dataType: yourDataType , 
        data    : myData , 
        success :function ( response ) 
        { 
            //response processing if needed 
 
            // Here the wait/processing messages is hidden 
            $().ajaxStop($.unblockUI({ message:null })); 
        } , 
        error   :function () 
        { 
            alert('there was an error processing the request!!'); 
            $().ajaxStop($.unblockUI({ message:null })); 
        } 
    }); 
}

最后，您必须将其添加到您的页面上，以便显示消息:

<div id="waitMessage" class="dataContainer" style="display: none;"> 
    <p style="font-size: 30px;">Processing request...</p> 
</div>

就是这样，希望对你有帮助! ;)

jquery之有没有一种好方法告诉 jQuery 不要在 HTML 的 ajax 请求上评估脚本

Tue, 28 Jul 2026 14:54:31 +0800

我正在使用 jQuery 发出 ajax 请求，一切都按预期工作。但它在错误的上下文中评估脚本。

我有一个 iframe(相同的域，这里不用担心)，我试图让脚本在 iframe 的上下文中进行评估，而不是在发出 ajax 请求的地方 - 例如。不同的框架。

我想我可以告诉 ajax 不要评估脚本，并且我会自己完成工作以在正确的上下文中评估它们。有什么想法或方法可以禁用自动评估吗？

编辑

所以，我对最初的问题有些错误。加载时不会评估脚本，而是将内容放入文档中时评估脚本。您可以通过测试示例看到这一点:

$('#some_element').html('<span>content</span><script>alert(window)</script>');

现在，当从不同的框架执行此操作时，评估发生在您调用的范围内，而不是您要插入内容的元素。

我最终在不使用 jQuery 的情况下设置了内容，然后查找/评估任何脚本标签:

element.get(0).innerHTML = data; 
element.find('script').each(function() { 
  otherWindow.eval(this.innerText); 
});

最终更新

我最终追踪到了它的源头，并从那里覆盖了它..以下是coffescript，但你可以明白这个想法。我选择覆盖它，因为就我的使用而言，这种情况永远不会发生在顶部窗口中，但应该出现在 iframe 内容中。

    $.globalEval = (data) -> (iframeWindow.execScript || (data) -> iframeWindow["eval"].call(iframeWindow, data))(data) if (data && /\S/.test(data))

请您参考如下方法:

这个问题展示了如何对脚本进行自定义评估:

jQuery: Evaluate script in ajax response

在下面的代码中... **此代码来自另一个问题的答案**只是将其作为片段获取:

  $("body").append($(xml).find("html-to-insert").eq(0)); 
  eval($(xml).find("script").text());

eval 本身绑定(bind)到一个窗口，您可以将其定义为上下文:

windowObject.eval - 当仅调用 eval('...') 时，它假设您像这样调用:window.eval('...')

现在您需要获取与要在其中执行 eval 的帧相对应的窗口，并执行如下操作:

myIFrameWindow.eval('...')

当您执行此操作时，它将在该窗口的上下文中执行。只需找到与您现在想要的 iframe 关联的窗口即可。

要查找给定框架的窗口，请查看这篇文章:

Getting IFRAME Window (And Then Document) References With contentWindow

jquery之来自 JQuery UI DatePicker 的自定义响应

Tue, 28 Jul 2026 14:54:31 +0800

我想向 JQuery DatePicker 添加一个按钮，该按钮将提供自定义响应(不是日期)。我的情况是一个询问以前工作经验的表格，我想要一个在 employment_date_end 字段上带有 DatePicker 的 Present 按钮。

请您参考如下方法:

$("<button>Present</button>").appendTo($('<div class="ui-datepicker-buttonpane ui-widget-content" />').appendTo(".ui-datepicker")).button()

此脚本在显示时将按钮添加到日期选择器，您可以在日期选择器的显示事件等事件上调用此脚本。要尝试它，只需打开 firebug 打开 datepicker 弹出窗口并在 firebug 控制台中执行脚本，按钮将被添加这只是我给出的一个简单的修复。还有很多其他方法，例如扩展 datePicker

JQuery animate之有什么方法可以完整触发 "stall"吗

Tue, 28 Jul 2026 14:54:31 +0800

假设我有一个具有定义的宽度和高度的视口(viewport)。我克隆了右侧 View 之外的一个元素，然后随机将其飞过视口(viewport) y位置代码如下:

    ... 
    .css({ 
        'left': BASE_NODE_INIT_LEFT_PX, 
        'top' : rand(BASE_NODE_INIT_TOP_MIN_PX, BASE_NODE_INIT_TOP_MAX_PX) + 'px', 
        'width': _width + 'px', 
        'height': _height + 'px', 
    }) 
    .animate({ 
        left: BASE_NODE_ANIMATE_DISTANCE_X_PX 
    } 
    ...

足够简单的动画。这是有趣的部分:在每一步中，我都想对这个元素应用一些物理原理。

类似这样的:

        ... 
        step:function(currentStep){ 
            if($(this).data('animating-wind') !== true) 
            { 
                $(this).data('animating-wind',true); 
                var wind = (rand(1,2) == 2) ? '+=' + rand(1, 100) + 'px' : '-=' + rand(1, 100) + 'px'; 
                $(this).animate({ 
                    'top': wind, 
                    'text-indent': wind, 
                },{ 
                    duration: 500, 
                    complete: function(){ 
                        $(this).data('animating-wind',false); 
                    }, 
                    queue: false 
                }); 
            } 
        } 
        ...

基本上发生的事情不是从右到左直线飞行，而是减速、加速、随机上升和下降，正如我的意图。

我面临的问题是，有时“风”足够强，以至于当步数达到计算的总步数时，元素在视口(viewport)上仍然可见，并且它会消失(这发生在我的complete:function(){ ...$(this).remove(); ...}

显然，JQuery 认为动画已经完成，因为它计算了步骤并说“我正在为这个对象设置动画，在这么多毫秒内经过这么多步骤 - 它就在那里”。但是风动画在动画队列之外，所以这个动画过程并不明智。

我想要的是开始动画并保持动画直到元素以任何方向退出视口(viewport) - 一旦它不再可见，无论是从其初始飞行路径还是从屏幕上吹来的风，我将检测到它并触发 onComplete打回来。我唯一能想到的就是将此动画放在函数内并放在 complete:function(){} 中对自身进行递归调用，然后在 step:function(){} 内我会进行“在视口(viewport)中可见”检查并调用 stop(true,false)如果true 。这似乎是一个非常昂贵的检查 - 在 400-1200 毫秒内运行该计算 100 多次可能会使动画不稳定，因此我正在寻找更优雅的解决方案。

TL；博士: 由于设置了其他动画而尚未到达目的地，我如何保持动画效果？

更新:我申请了@mu is too short's idea并想出了这个:

/**  
 * Create a new clone of the master div for user interaction. Position it  
 * randomly off the canvas, and animate it across at a random speed. 
 */ 
 
function spawn_target() { 
    spawn_timeout = setTimeout(function() { 
        var bonus = (rand(1, BONUS_ODDS) == BONUS_ODDS) ? ' ' + BONUS_CLASS : ''; 
        var _img_src = (bonus.length > 0) ? BONUS_NODE_IMG_SRC : BASE_NODE_IMG_SRC; 
        var _width = $('#' + BASE_NODE_ID).width(); 
            _width = Math.floor(rand(_width / 3, _width)); 
        var _height = _width; 
        var _framerate = 10 - Math.floor(_height/10); 
        var _clone = $('#' + BASE_NODE_ID).clone().addClass(CLONE_CLASS + bonus).attr('id', CLONE_ID).appendTo('#' + CANVAS_ID).css({ 
            'left': BASE_NODE_INIT_LEFT_PX, 
            'top': rand(BASE_NODE_INIT_TOP_MIN_PX, BASE_NODE_INIT_TOP_MAX_PX) + 'px', 
            'width': _width + 'px', 
            'height': _height + 'px', 
        }) 
 
        $(_clone).children('img').attr('src', _img_src); 
 
        /** 
         * Handle the actual flight across the viewport  
         * @param object _this The clone we are animating manually 
         * @return object pointer This contains the interval so we can clear it later 
        */ 
        function fly(_this) { 
 
            var animating_wind = false; 
            var pointer = { 
                timer_id: null 
            }; 
            pointer.timer_id = setInterval(function() { 
 
                // Get rid of the node if it is no longer visible in the viewport 
                if (!$(_this).is(':onviewport')) { 
                    clearInterval(pointer.timer_id); 
                    $(_this).remove(); 
                    adj_game_data(GAME_DATA_LIVES_ID, -1); 
                    check_lives(); 
                    spawn_target(); 
                } 
 
                // Move node along with slight realism 
                var distance = rand(FLY_DISTANCE_MIN, FLY_DISTANCE_MAX); 
                $(_this).css('left', '-=' + distance + 'px'); 
 
                // Only trigger the wind animation when it is idle 
                if (animating_wind !== true) { 
                    animating_wind = true; 
 
                    // Setup the wind physics 
                    var _wind_power = rand(WIND_POWER_MIN, WIND_POWER_MAX); 
                    var _wind_dir = (rand(1, 2) == 2) ? '+=' : '-='; 
 
                    // Override wind direction to keep node inside viewport 
                    if(($(_this).offset().top + $(_this).height() + _wind_power) > CANVAS_HEIGHT) 
                    { 
                        _wind_dir = '-='; 
                    } 
                    if(($(_this).offset().top - _wind_power) < CANVAS_TOP_BUFFER_PX) 
                    { 
                         _wind_dir = '+=';    
                    } 
 
                    var _wind = _wind_dir + _wind_power + 'px';   
 
                    // Apply the wind physics and don't let the node break the top or bottom 
                    // boundaries of the viewport 
                    $(_this).animate({ 
                        'top': _wind 
                    }, { 
                        duration: WIND_ANIMATION_DURATION, 
                        complete: function() { 
                            animating_wind = false; 
                        }, 
                        queue: false 
                    }); 
                } 
            }, _framerate); 
 
            return pointer; 
        } 
        $(_clone).data('interval', fly(_clone)); 
 
    }, rand(SPAWN_TARGET_TIMEOUT_MIN, SPAWN_TARGET_TIMEOUT_MAX)); 
}

这是我到目前为止所拥有的:http://jsfiddle.net/AlienWebguy/DmtQ7/embedded/result/

我喜欢这个想法，虽然看起来 JQuery 应该有一些内置的东西，这正是我所希望的。现在，而不是 $(obj).stop()我必须clearInterval($(obj).data('interval').timer_id); 。 *抓伤头...

请您参考如下方法:

这就是我认为你应该做的(伪 JavaScript):

function animate_it($thing) { 
    var wind     = false; 
    var timer_id = setInterval(function() { 
        // Compute the movement for this step. 
        // Then factor in the wind effect and update the `wind` variable. 
        // Then apply the movement to `$thing`. 
        if(it_is_off_the_page($thing)) 
            clearInterval(timer_id); 
    }, n); 
}

如果内部计算中有任何内容需要反复计算，请在 animate_it 级别预先计算它，并让闭包关闭它。您可能想稍微玩一下它来弄清楚 n 应该是什么。

只需手动制作动画，这样您就不会与 jQuery 的 animate 函数发生冲突，并在知道动画完成时停止动画。这还允许您几乎免费地包含风的方向和强度(以便您的动画对象可以向后移动)。

您可能希望将 timer_id 返回给外部世界，以便您可以从外部停止整个事件。在这种情况下，您需要用一个元素对象来伪造一个指针:

function animate_it($thing) { 
    var wind    = false; 
    var pointer = { timer_id: null }; 
    pointer.timer_id = setInterval(function() { 
        // Compute the movement for this step. 
        // Then factor in the wind effect and update the `wind` variable. 
        // Then apply the movement to `$thing`. 
        if(it_is_off_the_page($thing)) { 
            clearInterval(pointer.timer_id); 
            pointer.timer_id = null; 
        } 
    }, n); 
    return pointer; 
} 
 
var timer = animate_it($thing); 
 
// And then later, to shut it down... 
if(timer.timer_id) 
    clearInterval(timer.timer_id);

如果您有很多动画对象，您可能希望在 animate_it 上执行“it is gone”回调，这样您就可以保持外部计时器列表干净且无瑕疵。

<小时 />

尝试使用 animate 执行此操作的问题是 animate 在开始时计算步骤数，然后您可以更改它。您需要的步骤数量不定，但 animate 并不关心(它甚至比蜜獾还关心)。

jquery之第一个点之前的 Highcharts 轴标签

Tue, 28 Jul 2026 14:54:31 +0800

早上好，

我在使用 Highcharts 时遇到了一个非常烦人的问题，例如 x 轴标签(使用日期时间)不会从我的第一个数据点开始 - 如下图所示:

如您所见，图表标签从 8 月 15 日开始，而它应该从 8 月 9 日开始。

设置 startOnTick: true 会强制轴标签从左侧开始，但该标签仍然不对应于我的第一个点 - 如下图所示:

您可以在其中看到从 8 月 8 日开始的标签，而它应该从 8 月 9 日开始。在我的每小时图表中可以更好地显示:

我的系列类型是行，数据采用 [dateutc,decimal] 对。日期时间间隔不是固定的，范围可以从每小时到每天到每月。

xAxis: { 
  type: "datetime", 
  lineWidth: 2, 
  //startOnTick: true, 
  //showFirstLabel: true 
}

请您参考如下方法:

我认为您正在寻找的选项是tickInterval。您的刻度未按您想要的方式显示的原因是您没有定义自定义的刻度间隔，并且当您使用日期时间作为 x 轴类型时，它会为您选择一个。

这是一个example jsfiddle这会强制将 tickInterval 设置为每 2 天一次。

具有多个 ajax 值的 jQuery 自动完成

Tue, 28 Jul 2026 14:54:31 +0800

一直在关注 UI 站点的文档，并查看了一些教程并让我的代码可以正常工作，它 ajax 在我想要的术语列表中，您可以选择一个，它会放置值，然后“，”。但是，之后它不会再次提示输入第二个值。

此外，当我输入部分内容并弹出 10 个条目时，选项卡只会转到下一个表单字段，不确定我的 .bind 有什么问题，也许是设置？如果有人不介意看一下，我们将不胜感激!

function split(val) { 
            return val.split(/,\s*/); 
        } 
 
        function extractLast(term) { 
            return split(term).pop(); 
        } 
 
       jQuery('#tagSearch') 
            .bind('keydown', function(event) { 
                    if (event.keyCode === jQuery.ui.keyCode.TAB && 
                         jQuery(this).data('autocomplete').menu.active) { 
                            event.preventDefault(); 
                    } 
            }) 
           .autocomplete({ 
              autoFocus: true, 
              source: function(request, add) { 
                    console.log('source'); 
                    jQuery.getJSON('/get-tags-like.php?term_start=' + request.term, function(response) { 
                        var possibleTerms = []; 
 
                        jQuery.each(response, function(i, val) { 
                            possibleTerms.push(val.name + ' ' + '(' + val.count + ')'); 
                        }); 
 
                        add(jQuery.map(possibleTerms, function(item) { 
                            console.log(possibleTerms); 
                            return item; 
                        }));         
                    }); 
              }, 
              focus: function() { 
                  console.log('focus'); 
                return false; 
              }, 
              select: function(event, ui) { 
                  console.log('select'); 
                  var terms = split(this.value); 
 
                  terms.pop(); 
 
                  terms.push(ui.item.value); 
 
                  terms.push(''); 
 
                  this.value = terms.join(','); 
 
                  // At this point, example: 
                  // Sony (5) 
                var currentVal = this.value; 
 
                  // Sony (5) - Gets inserted as "Sony" 
                  currentVal = currentVal.replace(/\s\(.\)/, ''); 
 
                  this.value = currentVal; 
 
                  return false; 
              }, 
              minLength: 2 
           });

请您参考如下方法:

However, afterwards it doesn't prompt again for a second value.

确保您输入的字符超过 2 个。传递给 search 的函数会阻止少于两个字符的搜索导致搜索:

search: function() { 
      var term = extractLast(this.value); 
 
      if (term.length < 2) { 
          return false; 
      } 
},

<小时 />

Also, when I enter a partial and say 10 entries pop up, tabbing just goes to the next form field, not sure what's wrong with my .bind, perhaps a setting?

开头的bind 试图阻止用户当自动完成候选突出显示时从字段中按 Tab 键。对于单值自动完成，这通常不是问题，因为首先选择菜单项并将其放置在输入中，然后焦点就会丢失。

当您想要在输入中输入多个值时，这种情况会发生变化。我们想要停止将焦点更改到下一个输入字段的 keydown 默认操作。

自动完成有一个 autoFocus此处有用的选项。它将确保当用户输入后点击 Tab 时，候选者始终被选中。

我无法完全复制您的情况，但我创建了一个演示，它没有表现出您遇到的任何问题(我真正所做的就是更改源代码并添加 自动对焦选项):http://jsfiddle.net/zTVKC/