Cloning Google Suggest With Ajaxac
So now, with the benefit of hindsight from building this application before writing this article, I’ll show you the functions we need and them we’ll implement them.
All the code here goes into googlesuggestclone.js, which we will import into the GoogleSuggestCloneJax application later.
I’ll now quickly go over each function and describe exactly what it does. The next page contains the code for this file in full.
Prepares the web page for performing a HTTP subrequest to get suggestions, and sanitizes the query.
Firstly checks there is valid query text, and then makes sure the text isn’t the same as last time this function was called (this function will be called every time a key is pressed, even keys such as ‘alt’ or ‘control’ which won’t change the text.
If the query isn’t valid or was the same last value as last time, return an empty string. This way if an empty string is received back, the HTTP request won’t be performed.
If it’s all valid, then return the query string.
gsc_hide(), gsc_show() and gsc_ishidden()
gsc_hide() hides the search-results element, gsc_show() shows the search-results element, and gsc_ishidden() returns true if the search-results element is hidden, or false if not.
This function clears out the results from the search-results element. It removes all stored data about the previous query (such as the returned terms, and which one was selected). Finally, it hides the search-results element.
This function adds a result to the search-results element. When results are returned from a HTTP subrequest, this function will be called once for each result.
If parameter sel is set to true, then that result will be selected. The result is written to search-results as HTML, and also stored internally for future reference.
Additionally, the onmouseover, onmouseout and onmouseclick events are attached, which are described below.
gsc_mouseover() and gsc_mouseout()
gsc_mouseover is attached to each result in search-results, so when the user puts their mouse over a single result that result is highlighted.
gsc_mouseout is also attached to each result, so when the mouse moves away from an element it is unhighlighted.
These functions work by changing search-results’ internal selectedIndex value, and then calling gsc_highlightsel() to find the selected item and highlight it accordingly.
If a user clicks on a search term, then the term is transferred to the query input box, and the form is submitted (i.e. the actual search is performed).
gsc_handleup() and gsc_handledown()
gsc_handleup() handles functionality after user presses the up arrow. This needs to select the result above the current highlighted one.
gsc_handledown() handles functionality after user presses the down arrow. This needs to select the result below the current highlighted one.
Additional to this, there are the following rules:
- If search-results is hidden, then pressing up or down will make it appear again.
- If search-results is displayed but no items are selected, pressing down will select the first item in the list, while pressing up will select the last item in the list.
This function does the actual highlighting of the selected result in search-results.
It does this by finding all the divs in search-results (as each result is stored in a single div). It then loops over them. If the current one is not the selected one it will set it to the “sr” CSS class (search result, unselected), and if it matches the search-results selectedIndex value, it will set it to the “srs” CSS class (search result selected).
Additionally, when it finds the selected item, if the query input has been passed in, then it will place the value in the query input, and highlight the portion of the result that the user hasn’t yet typed.
This behaviour isn’t quite 100% accurate to Google Suggest, but it’s close.