リストビューがデータベースから動的に作成されるオートコンプリートを作成しようとしています。このためにリストビューからjsファイルのコードを返します。作成されたリストビューはフィルター処理され、選択されたリストテキストは入力フィールドに追加され、リストが作成されます隠れた。選択したリストのIDを取得するために、テーブル内のデータのIDと同じIDをリストビューに適用しています。私が欲しいのは、選択リストのIDをhtmlページに再実行して、後でそれを使用してデータベースに保存できるようにすることです。Jqueryモバイルオートコンプリートを使用しています。オートコンプリートの js コードは次のとおりです。
var db = window.openDatabase("Database", "1.0","BPS CRM", 200000);
function createlist(){
alert("i am in js ");
var usrname=new Array();
var usrid= 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;
usrid[i] = dataset.item(i).user_id;
console.log("Id from the database: "+usrid[i]);
}
}
});
});
if ( value && value.length > 1 ) {
for(var j=0;j<usrname.length;j++){
html +="<li id='"+usrid[j]+"'>"+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();
var id=$(this).attr('id');
alert("Id of selected user: "+id);
$('#namesearch').val(textval);
$.mobile.activePage.find("[data-role=listview]").children().addClass('ui-screen-hidden');
});
});}
HTMLスクリプトコードは次のとおりです。
$(function(){
createlist(); }
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d" >
</ul>