Use separate container for search results

This commit is contained in:
Pavel Djundik 2017-01-28 19:37:26 +02:00 committed by Jérémie Astori
parent cfa9da17a7
commit b1e9a7ffda
5 changed files with 25 additions and 9 deletions

View File

@ -1219,6 +1219,10 @@ kbd {
content: "Users";
}
#chat .user-mode-search:before {
content: "Search Results";
}
#loading {
font-size: 14px;
z-index: 1;

View File

@ -1069,11 +1069,15 @@ $(function() {
chat.on("input", ".search", function() {
const value = $(this).val();
const names = $(this).closest(".users").find(".names");
const parent = $(this).closest(".users");
const names = parent.find(".names-original");
const container = parent.find(".names-filtered");
names.find(".user").each((i, el) => {
$(el).text($(el).text().replace(/<\/?b>;/, "")).hide();
});
if (!value.length) {
container.hide();
names.show();
return;
}
const fuzzyOptions = {
pre: "<b>",
@ -1081,13 +1085,14 @@ $(function() {
extract: el => $(el).text()
};
fuzzy.filter(
const result = fuzzy.filter(
value,
names.find(".user").toArray(),
fuzzyOptions
).forEach(el => {
$(el.original).html(el.string).show();
});
);
names.hide();
container.html(templates.user_filtered({matches: result})).show();
});
chat.on("msg", ".messages", function(e, target, msg) {

View File

@ -30,4 +30,5 @@ module.exports = {
toggle: require("./toggle.tpl"),
unread_marker: require("./unread_marker.tpl"),
user: require("./user.tpl"),
user_filtered: require("./user_filtered.tpl"),
};

View File

@ -2,8 +2,9 @@
<div class="count">
<input class="search" placeholder="{{users users.length}}" aria-label="Search among the user list">
</div>
<div class="names names-filtered"></div>
{{/if}}
<div class="names">
<div class="names names-original">
{{#diff "reset"}}{{/diff}}
{{#each users}}
{{#diff mode}}

View File

@ -0,0 +1,5 @@
<div class="user-mode user-mode-search">
{{#each matches}}
<span role="button" class="{{original.className}}">{{{string}}}</span>
{{/each}}
</div>