Javascript magic auto search: how does it work?

[DiTBho]

So, I visited a couple of websites that really impressed me, not because of the aesthetic design, but rather for the "search" function.
In the top right corner there was a search text area where as soon as you type something, you see the results appear in a sort of pop-up window.

I know you can do something similar by implementing a filter in javascript, paired with an event (e.g. onkeyup(..)) , but in this case all the results have to be inside a <div> box in the page so the filter can hide what doesn't match to the searching parttern.

Code: [Select]

<div class="article_search">
  <button onclick="article_search_do()" class="article_search_button">Contents</button>
  <div id="myarticle_search" class="article_search_content">
    <input type="text" placeholder="Search..." id="article_search_input" onkeyup="article_search_filter()" >
    <a href="item_path">item</a>
...

However, looking at this website, I can't see *ANY* items already existing inside the html code and waiting to be hidden or showed by a JavaScript function.

So, how the search engine does work? 

[DiTBho]

Code: [Select]

<div class="article_search">
  <button onclick="article_search_do()" class="article_search_button">Contents</button>
  <div id="myarticle_search" class="article_search_content">
    <input type="text" placeholder="Search..." id="article_search_input" onkeyup="article_search_filter()" >
    <a href="item_path">item</a>
...
(html)

Code: [Select]

div    = document.getElementById("myarticle_search");
item   = div.getElementsByTagName("a");
(JavaScript)

• how to show: item.style.display = "";
• how to hide: item.style.display = "none";

(JavaScript)

[golden_labels]

Upon a quick look: the search program queries a Ghost intsance to download the content to search in. The program itself seems to be sodo-search supplied by⁽¹⁾ jsdelivr.

Note that, by deploying this, you’re banning various groups of people from using the search feature.

⁽¹⁾ https://cdn.jsdelivr.net/ghost/sodo-search@~1.1/umd/sodo-search.min.js

[DiTBho]

Upon a quick look: the search program queries

Thanks, so it's a completely different mechanism and implementation.
I am very impressed also because I am moving my first steps with JavaScript: everything is "new" for me 

Note that, by deploying this, you’re banning various groups of people from using the search feature.

Why? 

Which is the right way to implement such a feature?

- - -

In my case, at the moment I have less than 100 items, so my JS trick doesn't make the HTML page too fat and it does the job, but imagine you have 10000 items to index for query, with my JS trick, I would have to put ~10.000 items hidden into the HTML body (does it suck?).

I'm also impressed with the quick responsiveness of the search engine, as it reacts immediately as you type.

I mean, I am more used to the old-school "fill an input box" with a keywork and press the "submit" button

Code: [Select]

<form action="app1_react.html" method="post">
  <input type="text" id="search" name="search" value="keyword"><br>
  <input type="submit" value="Submit">
</form>

Which issues a "POST" (or a "PUT") request to the HTTP server, which elaborates it, and replies with the answer (app1_react.html).

Code: [Select]

POST /app1_react.html HTTP/1.1
Host: 192.168.1.81:1081
User-Agent: Mozilla/5.0 Firefox/121.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded
Content-Length: 55
Origin: http://192.168.1.81:1081
Connection: keep-alive
Referer: http://192.168.1.81:1081/app1.html
Upgrade-Insecure-Requests: 1

search=keyword


[golden_labels]

Note that, by deploying this, you’re banning various groups of people from using the search feature.

Why? 

This particular implementation is not going to be useful for visually impaired people and may pose problems to persons with limited dexterity. It also misses a fallback mechanism, so the feature is not available if for whatever reason the program misbehaves or is not run at all.

Which is the right way to implement such a feature?

Install it⁽¹⁾ as an optional feature on top of a normal search input/link. That is: extend the normal browser behavior instead of replacing it.

I'm also impressed with the quick responsiveness of the search engine, as it reacts immediately as you type.

That’s because it downloads the entire relevant database, when the user presses the “Q” icon, and stores it in memory. So all later requests are performed locally.

The files are:

Code: [Select]

https://lushay-labs.ghost.io/ghost/api/content/posts/?key=58b74ad4aaeb2e705b550a576a&limit=10000&fields=id%2Cslug%2Ctitle%2Cexcerpt%2Curl%2Cupdated_at%2Cvisibility&order=updated_at%20DESC
https://lushay-labs.ghost.io/ghost/api/content/authors/?key=58b74ad4aaeb2e705b550a576a&limit=10000&fields=id%2Cslug%2Cname%2Curl%2Cprofile_image&order=updated_at%20DESC
https://lushay-labs.ghost.io/ghost/api/content/tags/?key=58b74ad4aaeb2e705b550a576a&limit=10000&fields=id%2Cslug%2Cname%2Curl&order=updated_at%20DESC&filter=visibility%3Apublic
BTW, some browsers provide nowadys developer overlays of various kind. For example in Firefox you can go to Tools → Browser Tools → Web Developer Tools. It will open a panel/window, where you may inspect/explore the document, observe requests, debug webapps etc.

⁽¹⁾ The link discusses not using inline attributes for events. The argumentation misses the most important part, though: it conflicts with content security policies set to prevent XSS attacks.