Search Users in Member List
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #1
Search Users in Member List
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:
   

10-02-2015 04:31 AM
Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #2
RE: Search Users in Member List
Nice looking tweak actually.
Thanks for sharing.

My Blog
10-29-2015 12:18 PM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: