Search before you hit the button

[Cinnamonsroll]

Better search like the top.gg search where it shows results before you complete the search and hit the search button

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.74. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[Sank6]

That would spam database requests and web requests. Any suggestion on how this should be implemented?

[Cinnamonsroll]

When I talked to some people about this they suggested https://rxjs-dev.firebaseapp.com/guide/overview and also using no post request for search just some Ajax and then appending some li

[Cinnamonsroll]

hey so i own a serverlist and i added a feature like this not best way to do it but its a good start `setInterval(() => { $("#search-box").keypress() }, 1000)

$('#search-box').bind('keyup', function() { $(".thing").remove() const searchBox = $("#search-box"); const searchTerm = searchBox.val();

if (searchTerm) {

  $.ajax({
    url: `https://cosmicservers.glitch.me/search/oof?q=${searchTerm}`,
    type: "get",
    responseType: "json",
    success: function(resp) {
      console.log(resp.guilds);
      var guilds = [];
      var maxl = resp.guilds.length > 3 ? 3 : resp.guilds.length
      for (let i = 0; i < maxl; i++) {

     guilds.push(`<a class="text-light searchatag" href="/server/${resp.guilds[i].id1}"><li class="thing list-group-item list-group-item-info text-light searchresult"><img src="${resp.guilds[i].pic}" class="rounded"> ${resp.guilds[i].name}</li></a>`)

      }
      $("#re").html(guilds.join(''));

    }
  });
}

}); ajax

Search

ejs router.get("/oof", checkAuth, async (req, res) => { const search = req.query.q; if (!search) return res.json({ error: "No query defined." });

let guilds3 = await model.find();
let re = [];
for (let i = 0; i < guilds3.length; i++) {
  String.prototype.toProperCase = function() {
    return this.replace(
      /([^\W_]+[^\s-]*) */g,
      txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
    );
  };
  let guild1 = client.guilds.cache.get(guilds3[i].guild);
  if (
    guilds3[i].tags.map(t => t.toLowerCase()).includes(search.toLowerCase()) ||
    guild1.name.toLowerCase().includes(search.toLowerCase())
  ) {
    guilds3[i].votes = parseInt(guilds3[i].votes);
    guilds3[i].invite = guilds3[i].invite;
    guilds3[i].desc = guilds3[i].shortDesc || "Not set yet";
    guilds3[i].pic = guild1.iconURL({
      format: "png",
      dynamic: true,
      size: 4096
    });
    guilds3[i].name = guild1.name;
    guilds3[i].id1 = guild1.id;
    guilds3[i].members = guild1.members.cache.filter(u => !u.user.bot).size;
    guilds3[i].bots = guild1.members.cache.filter(u => u.user.bot).size;
    guilds3[i].lbumped =
      guilds3[i].bumpedOn !== "0"
        ? timeSince(`${guilds3[i].bumpedOn}`)
        : "";
    guilds3[i].tags = guilds3[i].tags;
    let manage;
    let test = guild1.members.cache.get(req.user.id);
    if (!test) test = "";
    if (test && test.permissions.has("MANAGE_GUILD")) manage = true;
    else manage = false;
    guilds3[i].manage = manage;
    guilds3[i].owner = guild1.owner.user.tag;
    guilds3[i].opic = guild1.owner.user.avatarURL({
      format: "png",
      dynamic: true,
      size: 32
    });
    re.push(guilds3[i]);
  }
}

let info = [];
for (let i = 0; i < guilds3.length; i++) {
  let guild1 = client.guilds.cache.get(guilds3[i].guild);
  if (
    guilds3[i].tags.map(t => t.toLowerCase()).includes(search.toLowerCase()) ||
    guild1.name.toLowerCase().includes(search.toLowerCase())
  ) {
    let guildobject = {};

    guildobject.pic = guild1.iconURL({ format: "png", size: 4096 });
    guildobject.name = guild1.name;
    guildobject.id1 = guild1.id;
    info.push(guildobject);
  }
}

return res.json({ guilds: info });

});` backend

[Sank6]

Yeah but that still spams the database with requests. I'd need to add a caching system but I dont know how ram intensive it would be for larger lists.