Response title
This is preview!
Problem with keyboard and remote autocomplete listview
in jQuery Mobile
•
9 years ago
Hello,
We used the example for remote autocomplete listview demo which works fine. However, the problem is that when you click on some listview item at the end of the list, another item (about 3 to 6 items above it depending on the phone screen) is clicked without user's intention.
Here is the exact sequence:
1. Search field reveals listview links through
2. Some of the revealed results are hidden under the keyboard and require a scroll.
3. Scroll down to some item at the end of the list and click on it. At that point search field looses focus, clicked item highlights in blue and keyboard hides. This causes resize of the whole listview which drags down the end of the list.
4. Clicked item goes down and instead of its link, the link of another item several rows above it, is triggered. The wrong item also highlights in blue even though no one clicked on it.
All in all when search field looses focus listview starts a resize which causes visible items to go even below the screen and other items come in their place. There is a problem with click events which are populated on items not clicked at all. Most probably the size of the keyboard should be included in the initial listview population at
We used the example for remote autocomplete listview demo which works fine. However, the problem is that when you click on some listview item at the end of the list, another item (about 3 to 6 items above it depending on the phone screen) is clicked without user's intention.
Here is the exact sequence:
1. Search field reveals listview links through
listviewbeforefilter function.2. Some of the revealed results are hidden under the keyboard and require a scroll.
3. Scroll down to some item at the end of the list and click on it. At that point search field looses focus, clicked item highlights in blue and keyboard hides. This causes resize of the whole listview which drags down the end of the list.
4. Clicked item goes down and instead of its link, the link of another item several rows above it, is triggered. The wrong item also highlights in blue even though no one clicked on it.
All in all when search field looses focus listview starts a resize which causes visible items to go even below the screen and other items come in their place. There is a problem with click events which are populated on items not clicked at all. Most probably the size of the keyboard should be included in the initial listview population at
listviewbeforefilter and this problem will disappear. I added several breaks at the end of the page so it will remain visible after keyboard removal, but that is very rough solution.
Our workaround is to find when the listview is scrolled down and hide keyboard before the user has any chance to click on some item. We achieved that by using the jQuery waypoints plug-in. It detects when the search field reaches the top of the screen and then by triggering the blur function keyboard hides:
- //In the pageinit function we put this code
if($.mobile.support && $.mobile.support.touch){-
$('input[data-type="search"]').waypoint(function(direction){ -
if(direction == "down" && this === window.document.activeElement){ -
$( this ).blur(); -
} -
}); }-
1
