我正在创建一个使用自动完成视图的应用程序,该列表是在 js 文件中动态创建的。知道我想要的是,如果我创建了多个我想要应用的自动竞争并且不同的 id 到由 jquery 移动自动完成创建的输入 type='search' 我试图将 id 应用到输入字段但发生了什么是它将健全的 id 应用于角色 =“搜索”的所有输入字段。但我想为角色 ='search' 的每个输入字段提供不同的 id。这是自动完成的js代码:
$( document ).on( "pageinit", "#myPage", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
if ( value && value.length > 1 ) {
html +="<li >Xyz</li>";
html +="<li >Abc</li>";
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
$.mobile.activePage.find('input[data-type="search"]').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');
});
});
$("#autocomplete1").on("listviewbeforefilter",function(e,data){
var $ul = $(this),
$input=$(data.input),
value = $input.val(),
html = "";
$ul.html('');
if(value && value.length >1) {
html +="<li>efg</li>";
html +="<li>hijk</li>";
$ul.html(html);
$ul.listview("refresh");
$ul.trigger("updatelayout");
$('#autocomplete').parent('div').find('input[data-type="search"]').attr('id','namesearch1');
}
$("ul>li").click(function(){
var textval1 = $(this).text();
$("#namesearch1").val(textval1);
$.mobile.activePage.find("[data-role=listview]").children().addClass('ui-screen-hidden');
});
});});
这是创建 ul 的 html 代码:
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d">
</ul>
<ul id="autocomplete1" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d">
</ul>