Question

I have a form that tracks items allowed in certain places on campus. A radio button group controls whether the area in question is a physical room or a more genearl ‘project’. Either one has its value entered into the same field in the database.

Rooms and projects are stored in separate tables. I want to take advantage of jQuery UI’s auto-complete here. So far, the change event on the radio group switches the appropriate text for room and project, and toggles the class ‘roomAC’. The ‘roomAC’ class is the selector for the auto-complete.

I figured when I removed the class it would no longer let the auto-complete work, but it does. This is because the event is still bound to the DOM element. What I want to know is if there is a way to bind/unbind the auto-complete event? Or am I stuck re-creating the event-handler inside my if statement (the one the radio group)?

MY JS

//ROOM FIELD JQUERY-UI AUTO-COMPLETE
$(".roomAC").autocomplete({
    source: "autocomplete.cfm",
    minLength: 4
});

tl;dr

How do I bind and unbind the jQuery UI auto-complete event?

Answer 1

Regarding your question about unbinding autocomplete control, you could either disable it or change source with .autocomplete( "option" , optionName , [value] ) syntax.

But if I understand your situation correctly, you actually want to send both the search term and source identifier. It could be achieved by using callback as source (in your autocomplete options). Documentation says:

The third variation, the callback, provides the most flexibility, and
can be used to connect any data source to Autocomplete. The callback
gets two arguments:

A request object, with a single property called “term”, which refers
to the value currently in the text input. For example, when the user
entered “new yo” in a city field, the Autocomplete term will equal
“new yo”.

A response callback, which expects a single argument to
contain the data to suggest to the user. This data should be filtered
based on the provided term, and can be in any of the formats described
above for simple local data (String-Array or Object-Array with
label/value/both properties). It’s important when providing a custom
source callback to handle errors during the request. You must always
call the response callback even if you encounter an error. This
ensures that the widget always has the correct state.

This is function I have used with jQuery UI autocomplete:

function initSuggest(){
    var cache = {},
        lastXhr;
    $( ".Mjesto" ).each( function() {
        $( this ).autocomplete( {
            minLength: 2,
            source: function( request, response ) {
                var sourceId = $("#DrzavaId option:selected").text();
                var term = request.term;
                if ( term in cache ) {
                    response( cache[term] );
                } else {
                    try {
                        lastXhr = $.getJSON( "autocomplete2.cfm", { c: sourceId, t: term }, 
                            function( data, status, xhr ) {
                                cache[term] = data;
                                if ( xhr === lastXhr ) {
                                response( data );
                            }
                        });
                    } catch( ex ) {
                        response( null );
                    }
                }
            },
            autoFocus: true
        } );
    } );
}

This function also caches response. If you ignore that, the trick is within try/catch block.