using jQuery UI autocomplete with webSQL and JSON object array

Question

So this one is killing me..

I'm trying to use the jQuery UI autocomplete plugin to work with a webSQL table. The problem I'm having is that I need to grab two fields from the json object array; An id field and a name field and push them into a JSON object array and then bind it to the autocomplete plugin.

When the user types in the autocomplete input field they should only see the name field and the id field should be set into a variable when a name is selected.

Below is an example that I have:

    var allFields = [];

    db.runInTxn({
        dbAction: function (txn) {
            txn.executeSql('SELECT <Id>, <Field1>, <Field2> FROM <Table>', null, function (txn, resultSet) {
                var rows = resultSet.rows;
                for (var i = 0; i < rows.length; i++) {
                    var row = rows.item(i);
                    allFields.push(
                         {1: row.<Id>, 2: row.<Field1>, 3: row.<Field2>}
                    );

                }

            }, function (txn, error) {
                console.log('Select error.', error);
            });
        }
    });

    //autocomplete field1 input
    $("#field1").autocomplete({
        source: allFields, 
        select: function (event, ui) {
            alert(ui.<Id>);
            //return false;
        }
    });

This doesn't work. Any help would be greatly appreciated.

damaniel · Accepted Answer · 2013-02-01 21:58:44Z

So I figure it out..

Actually really easy..The field that is to be the autocomplete value needs to be given a key named 'value'. So field1 will be the autocomplete value and id will be returned when field1 is selected.

var allFields = [];

db.runInTxn({
    dbAction: function (txn) {
        txn.executeSql('SELECT <Id>, <Field1>, <Field2> FROM <Table>', null, function (txn, resultSet) {
            var rows = resultSet.rows;
            for (var i = 0; i < rows.length; i++) {
                var row = rows.item(i);
                allFields.push(
                     {1: row.<Id>, value: row.<Field1>, 3: row.<Field2>}
                );

            }

        }, function (txn, error) {
            console.log('Select error.', error);
        });
    }
});

//autocomplete field1 input
$("#field1").autocomplete({
    source: allFields, 
    select: function (event, ui) {
        alert(ui.item.<Id>);
        //return false;
    }
});

Collectives™ on Stack Overflow

using jQuery UI autocomplete with webSQL and JSON object array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related