Use Scriptaculous autocomplete for category drop down

git-svn-id: http://svn.automattic.com/wordpress-mu/trunk@567 7be80a69-a1ef-0310-a953-fb0f7c49ff36

5 files changed, 52 insertions, 137 deletions

diff --git a/wp-inst/wp-admin/admin-functions.php b/wp-inst/wp-admin/admin-functions.php
index 866a3db..bb4b13c 100644
--- a/wp-inst/wp-admin/admin-functions.php
+++ b/wp-inst/wp-admin/admin-functions.php
@@ -711,7 +711,8 @@ function page_rows($parent = 0, $level = 0, $pages = 0, $hierarchy = true) {
   <tr id='page-<?php echo $id; ?>' class='<?php echo $class; ?>'> 
     <th scope="row"><?php echo $post->ID; ?></th> 
     <td>
-      <?php echo $pad; ?><?php the_title() ?> 
+      <?php echo $pad; ?><?php the_title() ?>
+      <?php if ('private' == $post->post_status) _e(' - <strong>Private</strong>'); ?></td>
     </td> 
     <td><?php the_author() ?></td>
     <td><?php echo mysql2date('Y-m-d g:i a', $post->post_modified); ?></td> 
@@ -741,7 +742,6 @@ function user_row( $user_object, $style = '' ) {
 	if (strlen($short_url) > 35)
 		$short_url =  substr($short_url, 0, 32).'...';
 	$numposts = get_usernumposts($user_object->ID);
-	if (0 < $numposts) $numposts = "<a href='edit.php?author=$user_object->ID' title='" . __('View posts') . "'>$numposts</a>";
 	$r = "<tr id='user-$user_object->ID'$style>
 		<td><input type='checkbox' name='users[]' id='user_{$user_object->ID}' value='{$user_object->ID}' /> <label for='user_{$user_object->ID}'>{$user_object->ID}</label></td>
 		<td><label for='user_{$user_object->ID}'><strong>$user_object->user_login</strong></label></td>
@@ -2010,119 +2010,44 @@ function get_udims($width, $height) {
 		return array((int) ($width / $height * 96), 96);
 }
 
-function AJAX_search_box( $get_url, $search_field = 'newvalue', $search_results_field = 'searchresults' ) {
+function autocomplete_css() {
 	?>
-	<script language="JavaScript">
-
-	function update_AJAX_search_box( username )
-	{
-		document.getElementById("<?php echo $search_field ?>").value=username;
-		document.getElementById("<?php echo $search_results_field ?>").style.display = 'none';
-		return false;
-	}
-
-	// from js_util.js by scottandrew.com/junkyard/js/
-	function addEvent(elm, evType, fn, useCapture)
-	{
-		if (elm.addEventListener){
-			elm.addEventListener(evType, fn, useCapture);
-			return true;
-		} else if (elm.attachEvent){
-			var r = elm.attachEvent("on"+evType, fn);
-			return r;
-		} else {
-			alert("Handler could not be removed");
-		}
-	}
-	// end from scottandrew.com/junkyard/js/
-
-	var valBox = false;
-	var displayBox = false;
-	var keyPressDelay = false;
-	var xmlhttp = false;
-
-	function init_ajax_searchbox() {
-		valBox = document.getElementById("<?php echo $search_field ?>");
-		displayBox = document.getElementById("<?php echo $search_results_field ?>");
-		addEvent(valBox, 'keyup', doTest, false);
-		addEvent(valBox, 'blur', onblurnewcat, false);
-		addEvent(valBox, 'focus', doTest, false);
-		keyPressDelay = '';
-
-		xmlhttp=false;
-		try {
-			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
-		} catch (e) {
-			try {
-				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
-			} catch (E) {
-				xmlhttp = false;
-			}
-		}
-
-		if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
-			xmlhttp = new XMLHttpRequest();
-		}
-	}
-	addLoadEvent( init_ajax_searchbox );
-
-	function onblurnewcat() {
-		setTimeout('closeSearchResults()',2000);
-	}
-	function closeSearchResults() {
-		displayBox.style.display = 'none';
-	}
-
-	function doTest(e) {
-		if (!e) {
-			if (window.event) {
-				e = window.event;
-			} else {
-				return;
-			}
-		}
-		if (e.keyCode == 8) {
-			displayBox.style.display = 'none';
-		}
-		if (e.keyCode == 27) {
-			displayBox.style.display = 'none';
-			return;
-		}
-		if (keyPressDelay) {
-			window.clearTimeout(keyPressDelay);
-		}
-
-		if(valBox.value.length > 2) {
-			keyPressDelay = window.setTimeout('doSearch()',800);
-		} else {
-			displayBox.style.display = 'none';
-		}
-
-	}
-
-	function doSearch() {
-		if(valBox.value.length > 2 && displayBox.style.display == 'none' ) {
-			xmlhttp.open("GET","<?php echo $get_url ?>"+valBox.value,true);
-			xmlhttp.onreadystatechange=function() {
-				if (xmlhttp.readyState==4) {
-					if( xmlhttp.responseText != '' ) {
-						displayBox.style.display = 'block';
-						displayBox.innerHTML = xmlhttp.responseText;
-						if( displayBox.innerWidth )  {
-							displayBox.width=displayBox.innerWidth;
-							displayBox.height=displayBox.innerHeight;
-						}
-					} else {
-						valBox.focus();
-						displayBox.style.display = 'none';
-					}
-				}
-			}
-			xmlhttp.send(null);
-		}
-	}
-	</script>
-	<?php
+<style type='text/css'>
+    div.autocomplete {
+      position:absolute;
+      width:200px;
+      background-color:white;
+      border:1px solid #888;
+      margin:0px;
+      padding:0px;
+    }
+    div.autocomplete ul {
+      list-style-type:none;
+      margin:0px;
+      padding:0px;
+    }
+    div.autocomplete ul li.selected { background-color: #ffb;}
+    div.autocomplete ul li {
+      list-style-type:none;
+      display:block;
+      margin:0;
+      padding:2px;
+      height:32px;
+      cursor:pointer;
+    }
+</style>
+<?php
+}
+function autocomplete_textbox( $url, $search_field, $results_field ) {
+	?>
+<script src="<?php echo get_option( "siteurl" ) ?>/wp-includes/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
+<script type="text/javascript">
+function load_autocompleter() {
+	new Ajax.Autocompleter("<?php echo $search_field ?>", "<?php echo $results_field ?>", "<?php echo $url ?>", {paramName: "search", minChars: 3});
+}
+addLoadEvent( load_autocompleter );
+</script>
+<?php
 }
 
 ?>
diff --git a/wp-inst/wp-admin/cat-js.php b/wp-inst/wp-admin/cat-js.php
index e740344..08393b7 100644
--- a/wp-inst/wp-admin/cat-js.php
+++ b/wp-inst/wp-admin/cat-js.php
@@ -26,17 +26,6 @@ function newCatAddIn() {
 
 	ajaxcat.appendChild(newcat);
 	ajaxcat.appendChild(newcatSub);
-
-	var searchResult = document.createElement( 'div' );
-	searchResult.type = 'div';
-	searchResult.name = 'searchresults';
-	searchResult.id = 'searchresults';
-	searchResult.style.display = 'none';
-	searchResult.style.overflow = 'auto';
-	searchResult.style.border = '1px solid #ccc';
-	searchResult.style.background = '#eee';
-	ajaxcat.appendChild(searchResult);
-
 	document.getElementById('jaxcat').appendChild(ajaxcat);
 
 	howto = document.createElement('span');
diff --git a/wp-inst/wp-admin/edit-category-form.php b/wp-inst/wp-admin/edit-category-form.php
index dde6b69..9b700af 100644
--- a/wp-inst/wp-admin/edit-category-form.php
+++ b/wp-inst/wp-admin/edit-category-form.php
@@ -20,12 +20,11 @@ if ( ! empty($cat_ID) ) {
 <input type="hidden" name="action" value="<?php echo $action ?>" />
 <input type="hidden" name="cat_ID" value="<?php echo $category->cat_ID ?>" />
 <?php wp_nonce_field($nonce_action); ?>
+<?php autocomplete_css(); ?>
 	<table class="editform" width="100%" cellspacing="2" cellpadding="5">
 		<tr>
 		  <th width="33%" scope="row" valign="top"><label for="cat_name"><?php _e('Category name:') ?></label></th>
-		  <td width="67%"><input name="cat_name" id="cat_name" type="text" value="<?php echo wp_specialchars($category->cat_name); ?>" size="40" />
-		  <div style='display:none; height: 100px; width: 200px; overflow: auto; border: 1px solid #ccc; background: #eee; margin: 5px; padding: 5px;' id="searchresults"><?php _e( 'Search Results' ) ?></div>
-		  <?php AJAX_search_box( "wpmu-edit.php?action=searchcategories&search=", "cat_name", "searchresults" ); ?></td>
+		  <td width="67%"><input type="text" id="cat_name" name="cat_name" value="<?php echo wp_specialchars($category->cat_name); ?>" size="40" /><div id="searchresults" class="autocomplete"></div></td>
 		</tr>
 		<tr>
 			<th scope="row" valign="top"><label for="category_parent"><?php _e('Category parent:') ?></label></th>
@@ -40,6 +39,7 @@ if ( ! empty($cat_ID) ) {
 			<td><textarea name="category_description" id="category_description" rows="5" cols="50" style="width: 97%;"><?php echo wp_specialchars($category->category_description, 1); ?></textarea></td>
 		</tr>
 	</table>
+<?php autocomplete_textbox( "wpmu-edit.php?action=searchcategories&search=", "cat_name", "searchresults" ); ?>
 <p class="submit"><input type="submit" name="submit" value="<?php echo $submit_text ?>" /></p>
 <div id="ajax-response"></div>
 </form>
diff --git a/wp-inst/wp-admin/edit-form-advanced.php b/wp-inst/wp-admin/edit-form-advanced.php
index 8d593e1..894e239 100644
--- a/wp-inst/wp-admin/edit-form-advanced.php
+++ b/wp-inst/wp-admin/edit-form-advanced.php
@@ -65,6 +65,7 @@ function focusit() {
 addLoadEvent(focusit);
 </script>
 <?php endif; ?>
+<?php autocomplete_css(); ?>
 <div id="poststuff">
 
 <div id="moremeta">
@@ -74,10 +75,12 @@ addLoadEvent(focusit);
 <h3 class="dbx-handle"><?php _e('Categories') ?></h3>
 <div class="dbx-content">
 <p id="jaxcat"></p>
-<ul id="categorychecklist"><?php dropdown_categories(get_settings('default_category')); ?></ul></div>
 <?php if ( current_user_can('manage_categories') ) : ?>
-<?php AJAX_search_box( "wpmu-edit.php?action=searchcategories&search=", "newcat", "searchresults" ); ?>
+<div id="searchresults" class="autocomplete"></div>
+<?php autocomplete_textbox( "wpmu-edit.php?action=searchcategories&search=", "newcat", "searchresults" ); ?>
 <?php endif; ?>
+<ul id="categorychecklist"><?php dropdown_categories(get_settings('default_category')); ?></ul>
+</div>
 </fieldset>
 
 <fieldset id="commentstatusdiv" class="dbx-box">
@@ -224,7 +227,7 @@ list_meta($metadata);
 </div>
 
 <?php if ('edit' == $action) : $delete_nonce = wp_create_nonce( 'delete-post_' . $post_ID ); ?>
-<input name="deletepost" class="button" type="submit" id="deletepost" tabindex="10" value="<?php _e('Delete this post') ?>" <?php echo "onclick=\"if ( confirm('" . sprintf(__("You are about to delete this post \'%s\'\\n  \'Cancel\' to stop, \'OK\' to delete."), addslashes($post->post_title) ) . "') ) { document.forms.post._wpnonce.value = '$delete_nonce'; return true;}\""; ?> />
+<input name="deletepost" class="button" type="submit" id="deletepost" tabindex="10" value="<?php _e('Delete this post') ?>" <?php echo "onclick=\"if ( confirm('" . sprintf(__("You are about to delete this post \'%s\'\\n  \'Cancel\' to stop, \'OK\' to delete."), addslashes($post->post_title) ) . "') ) { document.forms.post._wpnonce.value = '$delete_nonce'; return true;}return false;\""; ?> />
 <?php endif; ?>
 
 </div>
diff --git a/wp-inst/wp-admin/wpmu-edit.php b/wp-inst/wp-admin/wpmu-edit.php
index 97c8f40..f9fe8a0 100644
--- a/wp-inst/wp-admin/wpmu-edit.php
+++ b/wp-inst/wp-admin/wpmu-edit.php
@@ -34,18 +34,16 @@ switch( $_GET[ 'action' ] ) {
 		exit;
 	break;
 	case "searchcategories":
-		$search = $_GET[ 'search' ];
-		$id = $_GET[ 'id' ];
+		$search = $_POST[ 'search' ];
 		$query = "SELECT cat_name FROM " . $wpdb->sitecategories . " WHERE cat_name LIKE '%" . $search . "%' limit 0,10";
 		$cats = $wpdb->get_results( $query );
 		if( is_array( $cats ) ) {
-			print "<table cellpadding=2 cellspacing=0 border=0>";
-			print "<tr><td style='padding: 5px; background: #dfe8f1' >ESC to cancel</td></tr>";
+			print "<ul>";
 			while( list( $key, $val ) = each( $cats ) ) 
 			{ 
-				print '<tr><td><span onclick="javascript:return update_AJAX_search_box(\'' . $val->cat_name . '\');"><a>' . $val->cat_name . '</a></span></td></tr>';
+				print "<li>{$val->cat_name}</li>";
 			}
-			print "</table>";
+			print "</ul>";
 		}
 		exit;
 	break;