Question

I am successfully using the jQuery autocomplete combobox example. However, in the example, the source of the drop-down is created using a hard-coded value.

Of course I would like to use multiple combo boxes in my application. Unfortunately I don’t see a way to accomplish this.

The operative snippet of code in “combobox.js” is:

lastXhr = $.getJSON( "the_hardcoded_json_request_string", request, function( data, status, xhr ) {
...
}

I tried adding some lines above that that used “hasClass” to check for the existence of the class. Again unfortunately, I can’t even tell what object is calling this code. It has an undefined id, and my calls to hasClass are false. What in the hell?

My calls to combobox in my main javascript code look like this:

$("#myselect").combobox();

I am certain that () is used to pass some parameters if I want, but the declaration in combobox.js looks like this:

var cache = {}, lastXhr;
$.widget( "ui.combobox", {
    _create: function() {
...

Huh? I’m clearly no Javascript whiz, but I have no earthly idea whatsoever about $.widget, or how a call to “combobox()” just magically knows to call code from combobox.js. Please help if you can!

Answer 1

I would try something along the lines of the following.

(function( $ ) {
    $.widget( "ui.combobox", {
        _create: function(options) {

            // Some code

            var input = this.input = $( "<input>" )
            .insertAfter( select )
            .val( value )
            .autocomplete({
                delay: 0,
                minLength: 0,
                source: options.source,

                // More options...

            })

            // More code...

        });
    })( jQuery );

$("#myselect").combobox({source: 'http://yoursite.com/your/sourceurl'});

Observe the added options parameter in the _create function and the ‘option.source’ value for the source attribute of the wrapper autocomplete widget.