Demos: Fix search navigation through keyboard

Fixes jquery-archive#8405, jquery-archive#8407 Refs jquery-archive#8245
arschmitz · Jul 4, 2016 · e487356 · e487356
1 parent 99005f0
commit e487356
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 36 deletions.
diff --git a/demos/_assets/css/jqm-demos.css b/demos/_assets/css/jqm-demos.css
@@ -727,7 +727,7 @@ html body .ui-group-theme-a a:hover {
 .jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-accordion-header:active,
 .jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content .ui-accordion-header:hover {
 	color: #333;
-	text-shadow: 0 1px 0 #f3f3f3; 
+	text-shadow: 0 1px 0 #f3f3f3;
 	background: #cccccc;
 }
 .jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content li > .ui-listview-item-button:hover {
@@ -977,6 +977,15 @@ li.jqm-3rd-party .ui-listview-item-button::before {
 	color: #000000;
 }
 
+.jqm-search-list.ui-listview > .ui-listview-item-active > .ui-listview-item-button {
+	background-color: #eee;
+	color: #000000;
+	border-top: 0;
+	border-bottom: 1px solid #eee;
+	font-weight: 400;
+	text-shadow: 0 1px 0 #f5f5f5;
+}
+
 .jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus {
 	-webkit-box-shadow: inset 0 0 1px #0e82a5;
 	-moz-box-shadow: inset 0 0 1px #0e82a5;

diff --git a/demos/_assets/js/jqm-demos.js b/demos/_assets/js/jqm-demos.js
@@ -312,27 +312,37 @@ $( document ).on( "mobileinit", function() {
 		},
 		handleKeyUp: function( e ) {
 			var search,
-				input = this.element.prev("form").find( "input" );
-
-			if ( e.which === $.ui.keyCode.DOWN ) {
-				if ( this.element.find( "li.ui-button-active" ).length === 0 ) {
-					this.element.find( "li:first" ).toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
+				toBeHighlightled,
+				input = this.element.prev("form").find( "input" ),
+				isDownKeyUp = e.which === $.ui.keyCode.DOWN,
+				isUpKeyUp = e.which === $.ui.keyCode.UP;
+
+			if ( isDownKeyUp || isUpKeyUp ) {
+				if ( this.element.find( "li.ui-listview-item-active" ).length === 0 ) {
+					toBeHighlightled = this.element.find( "li" )
+					.not( ".ui-screen-hidden" )
+					[ isDownKeyUp ? "first" : "last" ]();
 				} else {
-					this.element.find( "li.ui-button-active a" ).toggleClass( "ui-button-active");
-					this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).next().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
+					this.element.find( "li.ui-listview-item-active a" )
+					.toggleClass( "ui-button-active");
+
+					toBeHighlightled = this.element.find( "li.ui-listview-item-active" )
+					.toggleClass( "ui-listview-item-active" )
+					[ isDownKeyUp ? "nextAll" : "prevAll" ]( "li" )
+					.not( ".ui-screen-hidden" )
+					.first();
 				}
 
-				this.highlightDown();
-			} else if ( e.which === $.ui.keyCode.UP ) {
-				if ( this.element.find( "li.ui-button-active" ).length !== 0 ) {
-					this.element.find( "li.ui-button-active a" ).toggleClass( "ui-button-active");
-					this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).prev().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
-				} else {
-					this.element.find( "li:last" ).toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
-				}
-				this.highlightUp();
+				// Highlight the selected list item
+				toBeHighlightled
+				.toggleClass( "ui-listview-item-active" )
+				.find( "a" )
+				.toggleClass( "ui-button-active" );
+			} else if ( e.which === $.ui.keyCode.ENTER ) {
+				this.submitHandler();
 			} else if ( typeof e.which !== "undefined" ) {
-				this.element.find( "li.ui-button-active" ).removeClass( "ui-button-active" );
+				this.element.find( "li.ui-listview-item-active" )
+				.removeClass( "ui-listview-item-active" );
 
 				if ( this.options.highlight ) {
 					search = input.val();
@@ -345,8 +355,8 @@ $( document ).on( "mobileinit", function() {
 			}
 		},
 		submitHandler: function() {
-			if ( this.element.find( "li.ui-button-active" ).length !== 0 ) {
-				var href = this.element.find( "li.ui-button-active a" ).attr( "href" );
+			if ( this.element.find( "li.ui-listview-item-active" ).length !== 0 ) {
+				var href = this.element.find( "li.ui-listview-item-active a" ).attr( "href" );
 
 				$( ":mobile-pagecontainer" ).pagecontainer( "change", href );
 				return false;
@@ -355,22 +365,6 @@ $( document ).on( "mobileinit", function() {
 			if ( this.options.submitTo ) {
 				this.submitTo();
 			}
-		},
-		highlightDown: function() {
-			if ( this.element.find( "li.ui-button-active" ).hasClass( "ui-screen-hidden" ) ) {
-				this.element.find( "li.ui-button-active" ).find("a").toggleClass( "ui-button-active" );
-				this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).next().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
-				this.highlightDown();
-			}
-			return;
-		},
-		highlightUp: function() {
-			if ( this.element.find( "li.ui-button-active" ).hasClass( "ui-screen-hidden" ) ) {
-				this.element.find( "li.ui-button-active" ).find("a").toggleClass( "ui-button-active" );
-				this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).prev().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
-				this.highlightUp();
-			}
-			return;
 		}
 	});
 })( jQuery );