How to use dynamic source in jquery combo box in an android application using phonegap

Question

I am using phonegap to develop an android application. There is an auto complete select box in the application for which I used the jquery combo box. The combo box is working fine when I am using a static source for the combo box. But I have to use a dynamic source for it, since there is a large set of data.The data is stored in sqlite datatbase. There is about 12000 items in the data and I want to filter out it to show only about 10 items with starting alphabets typed in the combo box. But the combo box is only showing the first 10 items and is not searching the database for each typed word. It is searching the database only when the backspace is pressed.

Here is the combo box code :

function loadCustomer(){

    //console.log('No rows affected!');
    //navigator.notification.alert(results.rows.item(0).name);

            (function( $ ) {
        $.widget( "ui.customer", {
            _create: function() {
                var input,
                    self = this,
                    select = this.element.hide(),
                    selected = select.children( ":selected" ),
                    value = selected.val() ? selected.text() : "",
                    wrapper = this.wrapper = $( "<span>" )
                        .addClass( "ui-customer" )
                        .insertAfter( select );

                input = $( "<input id='customer_input' autofocus>" )
                    .appendTo( wrapper )
                    .val( value )
                    .addClass( "ui-state-default ui-customer-input" )
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        autofocus:true,
                        source: function( request, response ) {
                            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex(request.term), "i" );
                            response( select.children( "option" ).map(function() {
                                var text = $( this ).text();
                                if ( this.value && ( !request.term || matcher.test(text) ) )
                                    return {
                                        label: text.replace(
                                            new RegExp(
                                                "(?![^&;]+;)(?!<[^<>]*)(" +
                                                $.ui.autocomplete.escapeRegex(request.term) +
                                                ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                            ), "<strong>$1</strong>" ),
                                        value: text,
                                        option: this
                                    };
                            }) );
                        },
                        select: function( event, ui ) {
                            ui.item.option.selected = true;
                            self._trigger( "selected", event, {
                                item: ui.item.option
                            });
                            show_balance();
                            updateGrid();
                            $("#next_link").focus();
                        },
                        search: function(event, ui) {var db = window.openDatabase("Database", "1.0", "Cordova Demo", 2097152);
                            db.transaction(selectCustomer, errorCB);},
                        change: function( event, ui ) {
                            if ( !ui.item ) {
                                var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                    valid = false;
                                select.children( "option" ).each(function() {
                                    if ( $( this ).text().match( matcher ) ) {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                if ( !valid ) {
                                    // remove invalid value, as it didn't match anything
                                    $( this ).val( "" );
                                    select.val( "" );
                                    input.data( "autocomplete" ).term = "";
                                    return false;
                                }
                            }
                        }
                    })
                    .focus(function() {
       $(this).autocomplete("search", "");})
                    .addClass( "ui-widget ui-widget-content ui-corner-left" );

                input.data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.label + "</a>" )
                        .appendTo( ul );
                };

                $( "<a>" )
                    .attr( "tabIndex", -1 )
                    .attr( "title", "Show All Items" )
                    .appendTo( wrapper )
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    })
                    .removeClass( "ui-corner-all" )
                    .addClass( "ui-corner-right ui-customer-toggle" )
                    .click(function() {
                        // close if already visible
                        if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                            input.autocomplete( "close" );
                            return;
                        }

                        // work around a bug (likely same cause as #5265)
                        $( this ).blur();

                        // pass empty string as value to search for, displaying all results
                        input.autocomplete( "search", "" );
                        input.focus();
                    });
            },

            destroy: function() {
                this.wrapper.remove();
                this.element.show();
                $.Widget.prototype.destroy.call( this );
            }
        });
    })( jQuery );

    $(function() {
        $( "#customer" ).customer();

    });
    return false;

    }

Here is the code to select the data from database:

function selectCustomer(tx) {
        requestterm=$("#customer_input").val();
        tx.executeSql('SELECT * FROM CUSTOMER WHERE name LIKE "'+requestterm+'%" LIMIT 10', [], selectCustomerSuccess, errorCB);

    }



function selectCustomerSuccess(tx, results) {

  if (!results.rowsAffected) {
    //console.log('No rows affected!');
    //navigator.notification.alert(results.rows.item(0).name);
     var len = results.rows.length;

    var options = '<option value=""></option>';
            for (var i=0; i<len; i++) {
                options += '<option value="' + results.rows.item(i).custid + '">' + results.rows.item(i).name + '</option>';
            }
            $("#customer").html(options);
            $('#customer option:first').attr('selected', 'selected');

return false;

  }

    }

Please help me. Thanks in advance.

Answer 1

You've got two problems:

1) Query returning only ten results

Your query is only returning 10 because you have a LIMIT 10 in there. So (I think) you'd want selectCustomer() to look like this:

function selectCustomer(tx) {
    requestterm=$("#customer_input").val();
    tx.executeSql('SELECT * FROM CUSTOMER WHERE name LIKE "'+requestterm+'%"', [], selectCustomerSuccess, errorCB);
}

2) Widget only searches when backspace is pressed

I'm not sure about this one. The docs say that search only executes "before a request (source-option) is started, after minLength and delay are met.". Could it be that your queries take a while to execute for some reason and it's just a coincidence that you are hitting backspace when they catch up? Also, have you tried adding a parse function to the autocomplete widget? parse lets you filter search results by getting called right after search, so that might help you debug this.