# In search result drop box: add given name next to username

**URL:** <https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735>\
**Category:** UX\
**Created:** [August 17, 2016, 1:07pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735 "2016-08-17T13:07:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [August 17, 2016, 1:07pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/1 "2016-08-17T13:07:25Z")

</div>

Hello,

in my community, the usernames might differ a lot from the given name. The results to a search also consider the given name, even though it is not displayed. If someone looks for the given name _Robert_ and finds only _@asdf2016_, it is not be evident that this is actually Robert.

 ![](https://global.discourse-cdn.com/meta/original/3X/b/f/bfa77e91f166f90fbf287f5da621ad49eb950585.png)

Hence, I suggest to add (if different from username) next to the username on the same line the given name in smaller letters. 😊

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [August 20, 2016, 4:33pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/2 "2016-08-20T16:33:45Z")

</div>

After 1 year, I eventually got the discourse dev environment with Vagrant running on my opensuse maschine. 😃

To realise the proposal one has to:

- make sure that the name for each user is returned if `Settings.enable_names` is active
- add some html to display the name

I have no idea how these serializers work. The search result uses this one:

> <https://github.com/discourse/discourse/blob/main/app/serializers/basic_user_serializer.rb>

`include_name?` is already there, but I don’t know how this is used.

To display the name, one probably has to change some lines in here:

> <https://github.com/discourse/discourse/blob/8321bdab4eae9be002b273d8478938f988b850d1/app/assets/javascripts/discourse/widgets/search-menu-results.js.es6#L47>

---

<div class="post-metadata">

**Author:** ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)\
**Post date:** [August 20, 2016, 10:36pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/3 "2016-08-20T22:36:46Z")

</div>

> [@rriemann](#):
>
> include\_name? is already there, but I don’t know how this is used.

It’s a magic trick to determine whether `name` should be included by the serializer. If it’s true, you can find that field in the JSON.

> [@rriemann](#):
>
> To display the name, one probably has to change some lines in here:

After that, Ember model and widget kicks in. Try `console.log(u)` in that function so that you can see what’s in the `u`. You could access name by `u.name` there. And you’ll need some `class` for colors probably.  
There is a site setting for displaying order of username and name. You could check that site setting and putting the name there.

You might find this useful:

> [@A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347):
>
> This is out of date. See [Widgets, the Widget API and their roadmap?](https://meta.discourse.org/t/widgets-the-widget-api-and-their-roadmap/292624) The latest builds of Discourse are much faster at rendering topics thanks to our [re-written post stream](https://eviltrout.com/2016/02/25/fixing-android-performance.html). I’ve written up [our new plugin API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051) but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works. What’s a Virtual DOM? A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The techniq…

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [August 22, 2016, 10:24am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/4 "2016-08-22T10:24:23Z")

</div>

Thanks for your suggestions.

> [@fantasticfears](#):
>
> Try console.log(u) in that function so that you can see what’s in the u. You could access name by u.name there

I tried so, but it doesn’t work:

 ![](https://global.discourse-cdn.com/meta/original/3X/1/b/1b2bf96ea5390df576a1ec1865890e028330e9e4.png)

There is no `u.name`. 😞 I made sure to have enabled names. In the rails console, `SiteSetting.enable_names?` gives true.

---

<div class="post-metadata">

**Author:** ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)\
**Post date:** [August 22, 2016, 10:55am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/5 "2016-08-22T10:55:21Z")

</div>

Er, you can amend `, name` right after the end of `attributes :id, :username, :avatar_template`. Not sure why it’s not there though.

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [August 22, 2016, 11:20am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/6 "2016-08-22T11:20:23Z")

</div>

Now it is working! The name is not included if `BasicUserserialiszer#include_name?` evaluates to false.

---

<div class="post-metadata">

**Author:** ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)\
**Post date:** [August 22, 2016, 11:32am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/7 "2016-08-22T11:32:09Z")

</div>

No, it’s not. But you should also check whether `enable_names?` is enabled on the client side

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [August 22, 2016, 11:59am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/8 "2016-08-22T11:59:18Z")

</div>

`enable_names` is two-sided? I thought it’s a global server-side setting.

---

<div class="post-metadata">

**Author:** ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)\
**Post date:** [August 23, 2016, 12:00am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/9 "2016-08-23T00:00:47Z")

</div>

Yes, you can find this setting in client side. See `widgets/hamburger-menu` for how to access site settings.

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [August 25, 2016, 9:52am UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/10 "2016-08-25T09:52:28Z")

</div>

I got the option enable\_names on the client-side working.

Unfortunately, the attribute `:name` in the serializer seems to cause issues that I couldn’t track down yet.

 ![](https://global.discourse-cdn.com/meta/original/3X/5/c/5c78d7b41a1c52ad9a7d368e638644aacbbf2002.png)

I could imagine that a database query has to be modified to select as well the name field.

---

<div class="post-metadata">

**Author:** ![designbygio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/designbygio/32/122415_2.png) [@designbygio](https://meta.discourse.org/u/designbygio)\
**Post date:** [February 13, 2017, 3:18pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/11 "2017-02-13T15:18:58Z")

</div>

hi! I just worked on this issue and submit a [PR for it](https://github.com/discourse/discourse/pull/4706).

@rriemann thank you for all your re-search, it saved me lot of time 🙂

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [February 13, 2017, 3:21pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/12 "2017-02-13T15:21:59Z")

</div>

Thanks! Could you please include a screenshot in your post of how the search looks with you PR added?

---

<div class="post-metadata">

**Author:** ![designbygio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/designbygio/32/122415_2.png) [@designbygio](https://meta.discourse.org/u/designbygio)\
**Post date:** [February 13, 2017, 3:26pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/13 "2017-02-13T15:26:44Z")

</div>

Right! I did the screenshot and forgot to include it 😃  
Here it is:

 ![](https://global.discourse-cdn.com/meta/original/3X/0/9/09c492732cd254ff4fbab3f8d1e96e6049ef918c.png)

I found it nice and clean to just wrap the name in parenthesis but if we think is not so important information, we could also do it smaller.

If user didn’t give his/her name, nothing will be display.

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [February 13, 2017, 3:42pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/14 "2017-02-13T15:42:30Z")

</div>

I would suggest to change the design to:

![](https://global.discourse-cdn.com/meta/original/3X/5/4/54f1c2acc4eaa5998c772172c1fe1cc66d75de91.png)

or:

![](https://global.discourse-cdn.com/meta/original/3X/6/8/6844577f681ff989a19115bef166c8c35cceb9ca.png)

maybe without the title.

in any case, I like the differentiation by font-weight/color.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [February 13, 2017, 3:52pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/15 "2017-02-13T15:52:48Z")

</div>

Absolutely, we should try to keep the display as consistent as possible with the site setting.

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [February 13, 2017, 4:07pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/16 "2017-02-13T16:07:52Z")

</div>

So as far as @designbygio’s PR is concerned, we’re saying go with the first example in @rriemann’s mockup, which does:

**username** Full Name

```
**username** Full Name

```

Still linking to username of course, but dropping the link styling, since the interactivity is obvious enough in the context of a search drop-down.

* * *

The second example in @rriemann’s mockup is a separate discussion and PR altogether. I think this is what we’re proposing:

1. IF `enable names` and `display name on posts` are _enabled_, and `prioritize username in ux` is _disabled_  
(i.e. Full Names will display first by default, as shown on Meta)
2. THEN, also display Full Name first in drop-down-search results.

---

<div class="post-metadata">

**Author:** ![designbygio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/designbygio/32/122415_2.png) [@designbygio](https://meta.discourse.org/u/designbygio)\
**Post date:** [February 15, 2017, 1:34pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/17 "2017-02-15T13:34:59Z")

</div>

thanks for the feedbacks!

About style:  
currently the username is not in bold.  
@erlend_sh what you said is:  
username in bold and blue color, name normal font-weight and grey color.  
Is that correct?

Honestly, I’m not sure about blue + grey.  
I try that solution but i personally didn’t like.

Is there any other place in the app where these style is already used?  
As Sam said, i want to keep consistent with other style but i didn’t find any place where these style is used.

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [February 15, 2017, 1:47pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/18 "2017-02-15T13:47:01Z")

</div>

I guess that, using the Meta settings, it would be like this:

 ![](https://global.discourse-cdn.com/meta/original/3X/0/2/02c873129b26fe6de81d794d2d2d29c6865ba0e9.png)

(look at my result)

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [February 15, 2017, 1:57pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/19 "2017-02-15T13:57:57Z")

</div>

I would simply go for this style, no need for blue:

![](https://global.discourse-cdn.com/meta/original/3X/b/a/bab8e72347df0596ae199153e55984a242450fb0.png)

It is consistent and be very familiar.

---

<div class="post-metadata">

**Author:** ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)\
**Post date:** [February 15, 2017, 2:27pm UTC](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735/20 "2017-02-15T14:27:28Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/7/d/7d588a157eb51c97f3c9ac2adc909e06370e4926.png)

- color is different
- order (username - realname) is different

[Next page](https://meta.discourse.org/t/in-search-result-drop-box-add-given-name-next-to-username/48735.md?page=2)
