Live Searcher

[AdrianJakubcik]

Live Searcher Update

Created a new javascript used for live search throughout the websites available for the Galileo Website. This allows the user to search for specific content on the websites available for the user to view. This search is not restricted by the language of the searched value, since it can be configured to search all the available websites, thus allowing for the cross-language search. When content is searched, the resulting feedback from the live search allows the user to easily recognize the language used on the resulting websites. The language is denoted in brackets after the name of the website in the resulting output; Example Site (en).

Editable searcher API configurations

/**
* The zero-based index position of the collection of `website files paths` in the `C.FILE_PATH` file, after being converted into an array using `JSON.parse()`.
*/
WEBSITES_INDEX: 0
/**
* The zero-based index position of the collection of `languages` in the `C.FILE_PATH` file, after being converted into an array using `JSON.parse()`.
*/
LANGUAGES_INDEX: 1
/**
* The number of characters to display with the searched value, when highlight previewing is enabled.
*/
PREVIEW_LENGTH: 35

/**
* The maximum number of returned preview lines containing the searched value per website.
*/
PREVIEW_COUNT: 3

/**
* The minimal search string length, before function `searchSites()` starts actual search.
*/
MIN_SEARCH_LENGTH: 3

/**
* The search query for the element - from which the data is read. Set this value if the content is located other than `div.content`.
*/
WEBSITE_CONTENT_ELEMENT_QUERY: "div.content"

/**
* The collection of sites that are excluded from searcher API. (Add files that are supposed to be excluded into the array)
*/
EXCLUDED_SITES_FROM_SEARCH: ["search.html"]

Usage

Live search option example

<input type="search" name="searchInp" onkeyup="searchSitesWithResult(this.value, 'search_results', false, true)" id="search_box" />

<div id="search_results" class="search-result"></div>

This is an example in which the live search is bonded to onkeyup event. this.value - The current value of the input element. search_result - The id of the div element on the website into which the results will be inserted. false - If the live search is supposed to search only through the websites of the current language. true - If a preview of the searched content should be displayed and highlighted.

Function definition

/**
 * Method used for searching the sites for the value provided.
 * @param {String} value The value provided by the input.
 * @param {String} resultBoxId The result `div` to be used for displaying the list.
 * @param {Boolean} onlyCurrentLanguage Search in the sites of the current language only. (false)
 * @param {Boolean} showPreviews Show the preview of the first occurence for each result. (false)
 */
function searchSitesWithResult(value, resultBoxId, onlyCurrentLanguage = false, showPreviews = false);

Live content highlighting (Currently opened website only)

<input type="search" name="searchInp" onkeyup="searchInSite(this.value)" id="search_box" />

This is an example of searching for the content on the current website, while the searched content is highlighted. this.value - The current value of the input element.

Function definition

/**
 * Method used for searching for the value provided in-site.
 * @param {String} value 
 */
function searchInSite(value);

GET request search

The search input code

To send the GET request to the website that is used for handling the GET request the function: sendSearch(string, string) is used.

<input type="search" name="searchInp" onchange="sendSearch(this.value, 'search.html')" id="search_box" />

this.value - Is the current value of the input box, this value is afterwards sent as the GET request parameter. search.html - Is the website which will handle the GET request. (The link to which to relocate after pressing enter)

This is an example of the implementation of the GET request search function which is implemented in the searcher API, it allows the user to search for the content on a wider scale. After the event onchange (when the value inside of the input box is changed and the user unfocuses from the input or presses enter - recommended to create a function to check for the return key press or add a button for searching) is fired the function sendSearch() creates a (quasi) GET request and relocates to the search.html website with the GET parameter search filled with the value of the input box.

The search website code

In order, for the website to handle this GET request. The function getRequestSearch(string, boolean, boolean, number, number) has to be called on the website in the <script> tag after the script searcher.js has been imported.

<script type="text/javascript">
     getRequestSearch("search_results_full", false, true, 100, 3);
</script>

search_results_full - Is the id of the HTML element that will be used to display the results of the search. false - Disables the option to search only using the current language. true - Enables the searcher to display previews of the content searched in the results. 100 - Is the maximum length of the preview text displayed. 3 - Is the maximum number of previews that can be displayed per search result.

This explains how the website used for searching handles the GET requests from the searcher API.

Functions definition

Send function

/**
 * Method used for searching the value provided externally using the `GET` method on the site provided.
 * @param {String} value The content to be searched for in the external site.
 * @param {String} site The path to the external site - after the language folder. Used for searching and displaying the results.
 */
function sendSearch(value, site, trimWhitespaces = true);

GET request handling function

/**
 * Method used when the website is done loading and there is a pending `GET` request for the searcher API. String query, searcher API uses is `search`.
 * @param {String} resultBoxId The id of the element into which the results will be inserted.
 * @param {Boolean} onlyCurrentLanguage Search only in the current language directory. (false)
 * @param {Boolean} showPreviews Enable/Disable showing the preview of the occurences of the searched value on the site. (false)
 * @param {Number} showPreviewLength The length of the previewed text in which the searched value was found. (`C.PREVIEW_LENGTH`)
 * @param {Number} showPreviewsPerPage The number of previews displayed per a page. (`C.PREVIEW_COUNT`)
 */
async function getRequestSearch(resultBoxId, onlyCurrentLanguage = false, showPreviews = false, showPreviewLength = C.PREVIEW_LENGTH, showPreviewsPerPage = C.PREVIEW_COUNT);

Core function used for searching

This method is used by all the previously mentioned functions for handling the user input and can be customized, or used by different methods to create new search methods.

Function definition

/**
 * Method used for searching the website/s for the `value` provided.
 * @param {String} value The search string.
 * @param {Boolean} onlySearchCurrentSite Search for the value only on the current website. (false)
 * @param {Boolean} onlySearchCurrentLang Search for the value only in the current language of the website. (false)
 * @param {Boolean} showPreview Get the preview of the searched value in the text provided. (false)
 * @param {Boolean} highlighedPreview If `showPreview = true`, then highlight the searched value in the preview text. (false)
 * @param {Number} previewLength The length of the preview text displayed after searching. (C.PREVIEW_LENGTH)
 * @param {Number} previewCount The maximum number of previews displayed. (C.PREVIEW_COUNT)
 * @returns The list of file paths containing the value searched; preview text - if previewing is enabled.
 * @example
 * //When searching in the current website.
 * //Call the next function on input for example:
 * 
 * <input type="text" onkeyup="searchSites(this.value, true)" />
 * //This will allow for the highlighting of the current website when the this.value exceeds the length of C.MIN_SEARCH_LENGTH
 * 
 * 
 * //When searching all the available sites.
 * //This function can be called in another function that will organize the data returned into a list and display it on site.
 * let results: Promise<[[string, [string]]] | null> = searchSites("example", false, false, true, false, 50, 3)
 * if(!results) console.log("No results found.")
 * else{
 *  results.then((res) => {
 *      for(let i = 0; i < res.length; i++){
 *          const data = res[i]
 *          const siteHref = data[0]
 *          const sitePrev = data[1]
 *          console.log(`Site found: ${siteHref} | Preview lines: ${sitePrev}`)
 *      }
 *  })
 * }
 */
async function searchSites(value, onlySearchCurrentSite = false, onlySearchCurrentLang = false, showPreview = false, highlighedPreview = false, previewLength = C.PREVIEW_LENGTH, previewCount = C.PREVIEW_COUNT);