[ticket/10737] Adding username suggestions in "Find a member" using AJAX

PHPBB3-10737

phpBB/memberlist.php

@@ -40,7 +40,7 @@ if ($mode == 'leaders')
 }
 
 // Check our mode...
-if (!in_array($mode, array('', 'group', 'viewprofile', 'email', 'contact', 'searchuser', 'team')))
+if (!in_array($mode, array('', 'group', 'viewprofile', 'email', 'contact', 'searchuser', 'team', 'livesearch')))
 {
 	trigger_error('NO_MODE');
 }
@@ -980,7 +980,44 @@ switch ($mode)
 		);
 
 	break;
-
+	
+	case 'livesearch':
+		$q=request_var('q','');
+		$hint="";
+		// Get us some users :D
+		$sql = "SELECT u.user_id
+			FROM " . USERS_TABLE . " u
+			WHERE u.user_type IN (" . USER_NORMAL . ', ' . USER_FOUNDER . ")";
+			
+		$result = $db->sql_query($sql);
+		$user_list = array();
+		while ($row = $db->sql_fetchrow($result))
+		{
+			$user_list[] = (int) $row['user_id'];
+		}
+		$db->sql_freeresult($result);
+		$sql = 'SELECT *
+				FROM ' . USERS_TABLE . '
+				WHERE ' . $db->sql_in_set('user_id', $user_list);
+		$result = $db->sql_query($sql);
+		$i=1;
+		while ($row = $db->sql_fetchrow($result))
+		{	$j=($i%2)+1;
+			if(stripos($row['username'],$q)===0)
+			{
+				$hint.="<tr class='bg".$j." row".$j."'><td><a href='" . 
+					$phpbb_root_path."memberlist.$phpEx". "?mode=viewprofile&u=" . $row['user_id'] . 
+					"' target='_blank'>" . 
+					$row['username'] . "</a></td></tr>";
+					$i++;
+			}
+			else
+				$hint.="";
+		}
+		echo $hint;
+		exit();
+	break;
+	
 	case 'group':
 	default:
 		// The basic memberlist
@@ -1456,7 +1493,8 @@ switch ($mode)
 				'S_JOINED_TIME_OPTIONS'	=> $s_find_join_time,
 				'S_ACTIVE_TIME_OPTIONS'	=> $s_find_active_time,
 				'S_GROUP_SELECT'		=> $s_group_select,
-				'S_USER_SEARCH_ACTION'	=> append_sid("{$phpbb_root_path}memberlist.$phpEx", "mode=searchuser&amp;form=$form&amp;field=$field"))
+				'S_USER_SEARCH_ACTION'	=> append_sid("{$phpbb_root_path}memberlist.$phpEx", "mode=searchuser&amp;form=$form&amp;field=$field"),
+				'S_LIVE_SEARCH_ACTION'  => append_sid("{$phpbb_root_path}memberlist.$phpEx", "mode=livesearch", $is_amp = false))
 			);
 		}
 

phpBB/styles/prosilver/template/memberlist_search.html

@@ -1,3 +1,38 @@
+<script>
+	function showHint(str)
+	{ 
+		if (str.length==0)
+		  { 
+		  document.getElementById("livesearch").innerHTML="";
+		  document.getElementById("livesearch").style.border="0px";
+		  return;
+		  }
+		if (window.XMLHttpRequest)
+		  {// code for IE7+, Firefox, Chrome, Opera, Safari
+		  xmlhttp=new XMLHttpRequest();
+		  }
+		else
+		  {// code for IE6, IE5
+		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+		  }
+		xmlhttp.onreadystatechange=function()
+		  {
+		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
+			{
+			document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
+			document.getElementById("livesearch").style.border="0px";
+			}
+		  }
+		xmlhttp.open("GET",'{S_LIVE_SEARCH_ACTION}'+"&q="+str,true);
+		xmlhttp.send();
+	}
+	
+	function clearSearch()
+	{	
+		document.getElementById("livesearch").innerHTML="";
+	}
+</script>
+
 <h2 class="solo">{L_FIND_USERNAME}</h2>
 
 <form method="post" action="{S_MODE_ACTION}" id="search_memberlist">
@@ -9,7 +44,7 @@
 	<fieldset class="fields1 column1">
 	<dl>
 		<dt><label for="username">{L_USERNAME}{L_COLON}</label></dt>
-		<dd><input type="text" name="username" id="username" value="{USERNAME}" class="inputbox" /></dd>
+		<dd><input type="text" name="username" id="username" value="{USERNAME}" class="inputbox" onkeyup="showHint(this.value)" onblur="clearSearch()" /> <table class="table1" id="livesearch"></table> </dd>
 	</dl>
 <!-- IF S_EMAIL_SEARCH_ALLOWED -->
 	<dl>

phpBB/styles/prosilver/theme/common.css

@@ -940,6 +940,17 @@ li.pagination ul {
 	z-index: 51;
 }
 
+/* Live search box */
+#livesearch {
+	width: 30%;
+	margin: 0px;
+	position: absolute;
+	background-color: #12A3EB;
+	box-shadow: 1px 2px 5px rgb(175,167,167);
+	z-index: 999;
+	overflow: auto;
+}
+
 /* Miscellaneous styles
 ---------------------------------------- */
 #forum-permissions {

phpBB/styles/subsilver2/template/memberlist_search.html

@@ -64,6 +64,41 @@
 	</script>
 <!-- ENDIF -->
 
+<script>
+	function showHint(str)
+	{ 
+		if (str.length==0)
+		  { 
+		  document.getElementById("livesearch").innerHTML="";
+		  document.getElementById("livesearch").style.border="0px";
+		  return;
+		  }
+		if (window.XMLHttpRequest)
+		  {// code for IE7+, Firefox, Chrome, Opera, Safari
+		  xmlhttp=new XMLHttpRequest();
+		  }
+		else
+		  {// code for IE6, IE5
+		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+		  }
+		xmlhttp.onreadystatechange=function()
+		  {
+		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
+			{
+			document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
+			document.getElementById("livesearch").style.border="0px";
+			}
+		  }
+		xmlhttp.open("GET",'{S_LIVE_SEARCH_ACTION}'+"&q="+str,true);
+		xmlhttp.send();
+	}
+	
+	function clearSearch()
+	{	
+		document.getElementById("livesearch").innerHTML="";
+	}
+</script>
+
 <form method="post" action="{S_MODE_ACTION}" name="search">
 
 <table class="tablebg" width="100%" cellspacing="1">
@@ -75,7 +110,7 @@
 </tr>
 <tr>
 	<td class="row1"><b class="genmed">{L_USERNAME}{L_COLON}</b></td>
-	<td class="row2"><input class="post" type="text" name="username" value="{USERNAME}" /></td>
+	<td class="row2"><input class="post" type="text" name="username" value="{USERNAME}" onkeyup="showHint(this.value)" onblur="clearSearch()" /> <table class="tablebg" id="livesearch"></table> </td>
 	<!-- IF S_EMAIL_SEARCH_ALLOWED -->
 		<td class="row1"><b class="genmed">{L_EMAIL}{L_COLON}</b></td>
 		<td class="row2"><input class="post" type="email" name="email" value="{EMAIL}" /></td>

phpBB/styles/subsilver2/theme/stylesheet.css

@@ -703,6 +703,14 @@ pre {
 	font-weight: bold;
 }
 
+#livesearch {
+	width: 35%;
+	margin: 0px;
+	position: absolute;
+	box-shadow: 1px 2px 5px rgb(175,167,167);
+	z-index: 999;
+	overflow: auto;
+}
 
 /* Former imageset */
 span.imageset {