Knockout and jQuery.ui.aytocomplete blur

Question

I am using Knockout v2.3.0 with jQuery.ui autocomplete control (jQuery v1.9.1). I used two binding handlers posted on related articles: Connect knockout and jQueryUI autocomplete and How to create an auto-complete combobox?

In both cases i have issue that after typing letters in input drop down list populate and show results. After i try to go mous over the list it dissapear. I checked that there is blur event invoked on jquery.ui.autocomplete after i mouse over on the list. When i comment out the code section from blur event:

blur: function (event) {
                if ( this.cancelBlur ) {
                    delete this.cancelBlur;
                    return;
                }

                clearTimeout( this.searching );
                this.close( event );
                this._change( event );
            }

list stopped disapearing but after mouseover i get:

Uncaught RangeError: Maximum call stack size exceeded.

every time i mouse over on the list. I can't choose any value too. Below are mine bindings:

<input type="text" data-bind="jqAuto: { autoFocus: false }, jqAutoSource:  DropDownElements, jqAutoQuery: function(searchTerm, array){ $root.getInstancesInRelationToOne(searchTerm, array, $data); }, jqAutoValue: Value, jqAutoSourceLabel: 'text', jqAutoSourceInputValue: 'text', jqAutoSourceValue: 'value'" />
<input type="text" data-bind="autoComplete:DropDownElements, source:'myUrl'" />

In both scenarios i have the same issue. Besides jQuery i am using also Bootstrap v2.2.1

Answer 1

I had the exact same problem and in my case it was because I included jQuery UI library twice. I did this because I am migrating a project to Angular where my shell is on Angular and my content views that will step-by-step be migrated are still on knockout. So by mistake I had jQuery UI loaded twice and this called the event handlers on the autocomplete (id=search) to be called twice, resulting in a stack overflow because they were working against each other.