Search Users in Member List

[RateU]

Maybe only a very few users use the search users feature in member list. Since no one (or a very few users) use it, so let's make it worse.

MyBB 1.8 already used Select2 for the search users. We'll try to use it to make the search feature worse.

1. xmlhttp.php
   • Find this code (#254 by default):
     
     PHP Code:

     254	$query = $db->simple_select("users", "uid, username", "username LIKE '".$db->escape_string_like($mybb->input['query'])."%'", $query_options);

     ---

     
     Change the query to:
     

     PHP Code:

     254	$query = $db->simple_select("users", "uid, username, usergroup, displaygroup, avatar, avatardimensions", "username LIKE '".$db->escape_string_like($mybb->input['query'])."%'", $query_options);

     ---

   • Find this code (#258 & #266 by default):
     
     PHP Code:

     $user['username'] = htmlspecialchars_uni($user['username']);

     ---

     
     Add this code after it:
     

     PHP Code:

     $username = format_name($user['username'], $user['usergroup'], $user['displaygroup']); $useravatar = format_avatar($user['avatar'], $user['avatardimensions'],'55x55'); $user_avatar = '<img src="'.$useravatar['image'].'" alt="" '.$useravatar['width_height'].' />';

     ---

   • Find this code (#259 by default):
     
     PHP Code:

     259	$data = array('id' => $user['username'], 'text' => $user['username']);

     ---

     
     Change it to:
     

     PHP Code:

     259	$data = array('id' => $user['username'], 'text' => $user['username'], 'user_avatar' => $user_avatar, 'username' => $username);

     ---

   • Find this code (#267 by default):
     
     PHP Code:

     267	$data[] = array('id' => $user['username'], 'text' => $user['username']);

     ---

     
     Change it to:
     

     PHP Code:

     267	$data[] = array('id' => $user['username'], 'text' => $user['username'], 'user_avatar' => $user_avatar, 'username' => $username);

     ---

   • Now, the entire codes from line #254 should be like this:
     
     PHP Code:

     254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275

     $query = $db->simple_select("users", "uid, username, usergroup, displaygroup, avatar, avatardimensions", "username LIKE '".$db->escape_string_like($mybb->input['query'])."%'", $query_options); if($limit == 1) { $user = $db->fetch_array($query); $user['username'] = htmlspecialchars_uni($user['username']); $username = format_name($user['username'], $user['usergroup'], $user['displaygroup']); $useravatar = format_avatar($user['avatar'], $user['avatardimensions'],'55x55'); $user_avatar = '<img src="'.$useravatar['image'].'" alt="" '.$useravatar['width_height'].' />'; $data = array('id' => $user['username'], 'text' => $user['username'], 'user_avatar' => $user_avatar, 'username' => $username); } else { $data = array(); while($user = $db->fetch_array($query)) { $user['username'] = htmlspecialchars_uni($user['username']); $username = format_name($user['username'], $user['usergroup'], $user['displaygroup']); $useravatar = format_avatar($user['avatar'], $user['avatardimensions'],'55x55'); $user_avatar = '<img src="'.$useravatar['image'].'" alt="" '.$useravatar['width_height'].' />'; $data[] = array('id' => $user['username'], 'text' => $user['username'], 'user_avatar' => $user_avatar, 'username' => $username); } }

     ---

2. memberlist template:
   • Find this code (#108 by default):
     
     Javascript Code

     108	MyBB.select2();

     ---

     
     Add this code after it:
     

     Javascript Code

     109 110 111 112 113 114 115

     function dtFormatResult(dt) { var markup = '<div class="clear">'; if(dt.user_avatar) markup += '<div class="float_left useravatar">'+dt.user_avatar+'</div>'; markup += '<div class="float_left useravatar">'+dt.username+'</div>'; markup += '</div><br class="clear" />'; return markup; }

     ---

   • Find this code (#141 by default):
     
     Javascript Code

     141	return {id:term, text:term};

     ---

     
     Change the code to:
     

     Javascript Code

     141	return {id:term, text:term, username:term};

     ---

   • Find this code (#143 by default):
     
     Javascript Code

     143

     },

     ---

     
     Add this code after it:
     

     Javascript Code

     144	formatResult: dtFormatResult

     ---

   • Now, the entire code from line #108 should be like this:
     
     Javascript Code

     108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152

     MyBB.select2(); function dtFormatResult(dt) { var markup = '<div class="clear">'; if(dt.user_avatar) markup += '<div class="float_left useravatar">'+dt.user_avatar+'</div>'; markup += '<div class="float_left useravatar">'+dt.username+'</div>'; markup += '</div><br class="clear" />'; return markup; } $("#username").select2({ placeholder: "{$lang->search_user}", minimumInputLength: 3, maximumSelectionSize: 3, multiple: false, ajax: { // instead of writing the function to execute the request we use Select2's convenient helper url: "xmlhttp.php?action=get_users", dataType: 'json', data: function (term, page) { return { query: term, // search term }; }, results: function (data, page) { // parse the results into the format expected by Select2. // since we are using custom formatting functions we do not need to alter remote JSON data return {results: data}; } }, initSelection: function(element, callback) { var value = $(element).val(); if (value !== "") { callback({ id: value, text: value }); } }, // Allow the user entered text to be selected as well createSearchChoice:function(term, data) { if ( $(data).filter( function() { return this.text.localeCompare(term)===0; }).length===0) { return {id:term, text:term, username:term}; } }, formatResult: dtFormatResult });

     ---

Now we should get the user avatar and the formatted username in the search list:
   

Then use our creativity to add more items to the format result. Example:
   

[ZiNgA BuRgA]

Nice looking tweak actually.
Thanks for sharing.