CODEWITHSUNDEEP
jqueryjsonlocal-storagejquery-ui-autocompleteweb-sql
damaniel
damaniel

Reputation: 299

using jQuery UI autocomplete with webSQL and JSON object array

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.

Upvotes: 1

Views: 838

Answers (1)

damaniel
damaniel

Reputation: 299

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;
    }
});

Upvotes: 1

Related Questions