marcj/jquery-selectBox

TypeError: this.typeSearch is undefined

Closed this issue · 10 comments

Hi!
The search by keyword isnt working for me I'm getting an error undefined type this.typeSearch, event if in the javascript file, this variable is being populated with text.

thanks for this plugin.

Can you say me please which Browser and can you please copy&paste the console error output?

The browser Im using is Firefox 22.0 and the error I'm getting is: TypeError: this.typeSearch is undefined.

The issue Im getting is only with the mignified version.

What do you use to generate minified version of the plugin? (uglifyjs)

Mh, interesting. I'm using always YUI compressor. Available here for example http://refresh-sf.com/yui/.
With which minifier does it work in your project?

I havent tried to minify it. I will try YUI compressor on the file which is working, later when I'm back to the office ^^.

Any new news here?

marcj, I found the error in the code segment referenced above:
jQuery alters the "this" context within the each function. Therefore, "this" within the .find('A').each(..) is no longer referring to your selectBox object, it is referring to the "A" html object. Because typeSearch is a property of the selectBox, it is undefined within the context of the html object. Alter the selectBox code as follows:

    default:
                // Type to find
                if (!control.hasClass('selectBox-menuShowing')) {
                    this.showMenu();
                }
                event.preventDefault();
                clearTimeout(this.typeTimer);
                this.typeSearch += String.fromCharCode(event.charCode || event.keyCode);
                var that = this;
                options.find('A').each(function () {
                    if ($(this).text().substr(0, that.typeSearch.length).toLowerCase() === that.typeSearch.toLowerCase()) {
                        that.addHover($(this).parent());
                        that.selectOption($(this).parent(), event);
                        that.keepOptionInView($(this).parent());
                        return false;
                    }
                });
                // Clear after a brief pause
                this.typeTimer = setTimeout(function () {
                    that.typeSearch = '';
                }, 1000);
                break;

Also note that you must retain the "this" context within the "that" variable for your setTimeout or the typeSearch string will never be cleared. The anonymous function run within setTimeout also has a new this context.

V/R,
Mike

Oh, I forgot to mention, the above code belongs in SelectBox.prototype.handleKeyPress as the default switch code.

It's been already a year. I forget what was the issue :s.
But thanks for the help!