search_suggestion: Show profile pictures in autocomplete suggestions.

Because the typeahead.js list items are currently just text, a user's
full name and avatar should be displayed in `input_pill`. To use
`input_pill`, a separate Handlebars partial view was created to
provide a mandatory container (`<div class="pill-container">`) for
`input_pill` and a flex container (`<div class="search_list_item">`)
for vertically aligning the text.

The description of each suggestion (i.e `description_html`) is
rendered as raw HTML, so every special character (e.g. whitespace)
should be HTML-escaped. This enables highlighting the substring in
each search suggestion that matches the query.

Fixes: #20267
This commit is contained in:
Oliver Pham
2021-12-06 17:44:26 -05:00
committed by Tim Abbott
parent 9cc8a2bc80
commit 2ed650f596
9 changed files with 335 additions and 134 deletions

View File

@@ -1,5 +1,7 @@
import $ from "jquery";
import render_search_list_item from "../templates/search_list_item.hbs";
import {Filter} from "./filter";
import * as message_view_header from "./message_view_header";
import * as narrow from "./narrow";
@@ -94,7 +96,7 @@ export function initialize() {
naturalSearch: true,
highlighter(item) {
const obj = search_map.get(item);
return obj.description_html;
return render_search_list_item(obj);
},
matcher() {
return true;