how to get id of selected list data in the jquery mobile autocomplete

Question

I am creating an app in which I have used jQuery mobile autocomplete the listview data is created dynamically from the database the autocomplete listview code is return in the js file. I am able to select the data from the listview and show it in the input field of the autocomplete and then disable the search list.

Know what I want is seens I am get the data from the data base when user select the list data it will display the name but when it click on the save button it should save the id of that name instead of the name in jQuery ui autocomplete its easy because there we can use array with label and value.

But I don't know how to do it in jQuery mobile.

The code for creating the autocomplete in here:

var db = window.openDatabase("Database", "1.0","BPS CRM", 200000);
$( document ).on( "pageinit", "#myPage", function() {

var usrname = new Array();
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    db.transaction(function(tx){
        tx.executeSql('select * from users',[],function(tx,results){
            var dataset = results.rows;
            if(dataset.length > 0){
            for(var i = 0; i < dataset.length; i++){
                    usrname[i] = dataset.item(i).user_name;
                }
            }
        });
    });
    if ( value && value.length > 1 ) {
                    for(var j = 0; j < usrname.length; j++){
                    html += "<li>"+usrname[j]+"</li>";
                }

         $ul.html( html );
         $ul.listview( "refresh" );
         $ul.trigger( "updatelayout");

         $.mobile.activePage.find('input[placeholder="Find a city..."]').attr('id','namesearch');
    }

    $("ul > li").click(function(){

        var textval = $(this).text();
        $('#namesearch').val(textval);
        $.mobile.activePage.find("[data-role=listview]").children().addClass('ui-screen-hidden');

    });
}); });

It will great if small example is given for the same.

Any suggestion is appreciated. Thanks in advance.

Answer 1

I am not exactly sure I understood the question, but I think what your are looking for is to store the user ID in the <li> elements, in addition to having the username as the displayed text.

Something like this might do the job for you:

// declare a collection of Ids where you declare usrname
var usrids = new Array();

// in your execute sql callback, add this line:
usrids.push(dataset.item(i).user_id);  // see note below

// in your for loop where you insert li's, modify the line like this :
html +="<li data-userid='" + usrids[j] + "'>"+usrname[j]+"</li>";

// then in your ul>li click event, you can reference your ids like this :
var userId = $(this).data('userid');

Also, as a general note, I think it's better to use usrids.push(...) and usrname.push(...) instead of using usrids[i] = ...; when the element i does not already exist in the given array.