Javascript magic auto search: how does it work? - Page 1
Forum section: electronics / general

author: DiTBho
author_rank: Super Contributor
timestamp: January 04, 2024, 03:23:48 pm
content: 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:<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 atthiswebsite, 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?

author: DiTBho
author_rank: Super Contributor
timestamp: January 04, 2024, 03:34:11 pm
content: Code:<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:div = document.getElementById("myarticle_search");item = div.getElementsByTagName("a");(JavaScript)how to show: item.style.display = "";how to hide: item.style.display = "none";(JavaScript)

author: golden_labels
author_rank: Super Contributor
timestamp: January 05, 2024, 06:39:30 am
content: Upon a quick look: the search program queries aGhost intsanceto download the content to search in. The program itself seems to besodo-searchsupplied by(1)jsdelivr.Note that, by deploying this, you’re banning various groups of people from using the search feature.(1)https://cdn.jsdelivr.net/ghost/sodo-search@~1.1/umd/sodo-search.min.js

author: DiTBho
author_rank: Super Contributor
timestamp: January 05, 2024, 10:27:13 am
content: Quote from: golden_labels on January 05, 2024, 06:39:30 amThanks, 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 meQuote from: golden_labels on January 05, 2024, 06:39:30 amWhy?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" buttonCode:<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:POST /app1_react.html HTTP/1.1Host: 192.168.1.81:1081User-Agent: Mozilla/5.0 Firefox/121.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8Accept-Language: en-US,en;q=0.5Accept-Encoding: gzip, deflateContent-Type: application/x-www-form-urlencodedContent-Length: 55Origin: http://192.168.1.81:1081Connection: keep-aliveReferer: http://192.168.1.81:1081/app1.htmlUpgrade-Insecure-Requests: 1search=keyword

author: golden_labels
author_rank: Super Contributor
timestamp: January 05, 2024, 02:23:02 pm
content: Quote from: DiTBho on January 05, 2024, 10:27:13 amThis 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.Quote from: DiTBho on January 05, 2024, 10:27:13 amInstall it(1)as an optional feature on top of a normal search input/link. That is: extend the normal browser behavior instead of replacing it.Quote from: DiTBho on January 05, 2024, 10:27:13 amThat’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: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%20DESChttps://lushay-labs.ghost.io/ghost/api/content/authors/?key=58b74ad4aaeb2e705b550a576a&limit=10000&fields=id%2Cslug%2Cname%2Curl%2Cprofile_image&order=updated_at%20DESChttps://lushay-labs.ghost.io/ghost/api/content/tags/?key=58b74ad4aaeb2e705b550a576a&limit=10000&fields=id%2Cslug%2Cname%2Curl&order=updated_at%20DESC&filter=visibility%3ApublicBTW, 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.(1)The link discusses not using inline attributes for events. The argumentation misses the most important part, though: it conflicts withcontent security policiesset to prevent XSS attacks.