nick chan
asked on
search bar text disappears when click/touch on page content (framework7 phonegap)
Hi guys. I'm trying to implement framework7 searchbar using customized search in phonegap
I have this html code
this is the virtual list in the app's javascript
this is the searchbar initialization and search code
when I type something in the textbox, the searching code will run. when myTicketList is updated, the list will show the result, like in the photo below
but when I touch the lower part (page-content div), the search bar textbox becomes empty immediately.
does anyone know what I'm doing wrong? any help is greatly appreciated
I have this html code
<form class="searchbar">
<div class="searchbar-input">
<input type="search" placeholder="Search">
<a href="#" class="searchbar-clear"></a>
</div>
<a href="#" class="searchbar-cancel">Cancel</a>
</form>
<div class="searchbar-overlay"></div>
<div class="page-content" id="page_tickets">
<div class="content-block searchbar-not-found">
<div class="content-block-inner">No element found...</div>
</div>
<div class="list-block list-block-search searchbar-found">
<ul>
</ul>
</div>
</div>
</div>
</div>
this is the virtual list in the app's javascript
myTicketList = myApp.virtualList('.searchbar-found', {
items: [],
template: '<li class="item-content">' +
'<div class="item-inner">' +
'<div class="item-title">{{title}}</div>' +
'</div>' +
'</li>',
});
this is the searchbar initialization and search code
mySearchbar = myApp.searchbar('.searchbar', {
customSearch : true,
onSearch: function (s) {
var text = s.query.trim().replace(/\'/g, '\'\'')
if (text != '') {
execute("select * from tickets where ticketid like '%" + text + "%' or data like '%" + text + "%' order by id", [],
function (tx, r) {
myTicketList.deleteAllItems();
var result = []
for (var i = 0 ; i < r.rows.length ; i++) {
result.push({ 'title': r.rows[i].ticketid })
}
myTicketList.prependItems(result)
})
} else myTicketList.deleteAllItems();
}
});
when I type something in the textbox, the searching code will run. when myTicketList is updated, the list will show the result, like in the photo below
but when I touch the lower part (page-content div), the search bar textbox becomes empty immediately.
does anyone know what I'm doing wrong? any help is greatly appreciated
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.