在jQuery插件中使用Typeahead Bloodhound

时间:2015-11-06 14:40:13

标签: jquery jquery-plugins scope typeahead.js bloodhound

我有一个基本的jQuery插件定义如下:

(function( $ ){
    var new_row_num = 0; 

    // Test data for now
    var courses = [
        {
            course_num: "M118",
            title: "Finite Math"
        },
        {
            course_num: "M119",
            title: "Calculus"
        }        
    ];

    // constructs the suggestion engine
    var courseSuggestions = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('course_num'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: courses
    });    

    var methods = {
        init : function(options) {

        },
        add : function( ) {
            // Adds a new row to my table
        }
    };

    $.fn.studentCourseBox = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.studentCourseBox' );
        }    
    };
})( jQuery );

这个想法是每次我使用这个插件添加一个新行:

$('#myWidget').studentCourseBox('add')

它会自动初始化其中一列中的Typeahead字段。不幸的是,我收到一个Javascript错误" ReferenceError:没有定义Bloodhound"在第一次提到Bloodhound时。

但是,如果我将coursescourseSuggestions的变量初始化移到插件之外,并通过init方法传递它们,它就可以正常工作。所以,我知道Bloodhound在我的脚本中工作,它只是在我的插件工作。

我做错了什么?我觉得这是一个范围问题,但我已经尝试$.Bloodhound$.fn.Bloodhound等等,但没有任何作用。

1 个答案:

答案 0 :(得分:0)

我的Javascript包含错误的顺序。在此代码后,我有Bloodhound加载的JS资源,因此我的浏览器必须在定义courseSuggestions之前尝试实例化Bloodhound。但不确定为什么它在插件外部实例化时才有效。