Autocomplete with static files [4/4] - Implementing autocomplete with generated static files

At this stage, we should have already have generated our 'data source' of autocomplete JSON files. We can now finally implement a working text box with autocomplete functionality, which consumes these files.

Thu Nov 23 2017

This post finalizes the autocomplete series; you will be creating a textbox with autocomplete. The autocomplete will retrieve its data from pre-generated static files in a folder on a web server, as opposed to a server API with searching capabilities.

Dynamic content vs static content

On a traditional web server when a user searches for JO, something similar to the following will occur:

The client sends a search request to the server, containing the partial word the user has typed. e.g., JO
The partial word is then extracted, by server-side website/API code
Database queries would be made to find records starting with JO
Any results would then be returned to the user

var userSearchedFor = "JO";
var normalUrl =
"http://www.javaserver.com/searchCustomer?name=" + encodeURIComponent(userSearchedFor.toUpperCase());

With static file autocomplete, the flow is as follows:

Request made to the server
We are looking for an exact file called JO or JO.json
If that file exists, we return the file contents, which have already been prepared for us
If it doesn’t exist (404), we must assume there are no results for JO.

var userSearchedFor = "JO";
var searchUrl =
"http://your-server.com/static-autocomplete-files/customers/" + encodeURIComponent(userSearchedFor.toUpperCase()) + '.json';

Demo in action

Snippet source code

Edit on GitHub

    <link rel="stylesheet" href="autocomplete/auto-complete.css" />
    <div>
        <label for="txt-autocomplete">Start typing: </label>
        <input id="txt-autocomplete" />
    </div>
    <script src="autocomplete/auto-complete.min.js"></script>
    <script>
        var xhr;
        new autoComplete({
            selector: document.getElementById('txt-autocomplete'),
            minChars: 1,
            delay: 0,
            source: function (term, response) {
                try { xhr.abort(); } catch (e) { }
                xhr = new XMLHttpRequest();
                xhr.open("GET", "autocomplete/results/" + term.toUpperCase() + ".json", true);
                xhr.onload = function () {
                    if (xhr.status == 200) {
                        response(JSON.parse(xhr.responseText));
                    }
                }
                xhr.send();
            },
            renderItem: function (item, search) {
                return '<div class="autocomplete-suggestion" data-countryregion="' + item.additionalInfo.region + '">' + item.results + '</div>';
            },
            onSelect: function (e, term, item) {
                alert('You have selected ' + item.innerHTML + '. Which is in the region: ' + item.getAttribute('data-countryregion'));
            }
        });
    </script>

Dependencies:

AutoCompleteJs

Autocomplete with static files [4/4] - Implementing autocomplete with generated static files

At this stage, we should have already have generated our 'data source' of autocomplete JSON files. We can now finally implement a working text box with autocomplete functionality, which consumes these files.

Dynamic content vs static content

Demo in action

Snippet source code

Find the number of non-contiguous islands in a 2d matrix world

Using recursion and depth-first search to find all islands in a given 2d matrix world

Find the median in a data stream

Adding incoming data in a way that it's optimized to always knowing the median

First missing positive

Find the first missing positive integer in an array in O(array_length) time from LeetCode

Median of two arrays

Getting the median of two sorted arrays in O(log(small_array_length)).

Merge k sorted linked lists

Disseminating the "merge k sorted linked lists" problem from Leetcode.com.

Setup Isso comments on your website today

This guide goes through everything you need to get the open source commenting software Isso running on your website for completely free with Google Cloud.

ZigZag conversion algorithm

A dive into the ZigZag letter conversion on Leetcode.com. Letters initially are written in a zig-zag formation and must be read back from left to right.

Cherry pickup algorithm

An in-depth look at the Cherry Pickup problem on Leetcode.com.

Autocomplete with static files [4/4] - Implementing autocomplete with generated static files

At this stage, we should have already have generated our 'data source' of autocomplete JSON files. We can now finally implement a working text box with autocomplete functionality, which consumes these files.

Autocomplete with static files [3/4] - Building an autocomplete static file generator

In this post we will be implementing an autocomplete static file generator, using the principles, learned in the past two articles in this series. Also within this post is a working demo which produces static autocomplete JSON files for a CSV.

Autocomplete with static files [2/4] - Visualization of words in a Trie

An interactive visualization of how to implement autocomplete without a backend server, using only static files. This post will help with understanding the underpinnings of autocomplete using a Trie data structure.

Autocomplete with static files [1/4] - Introduction

An introduction to static files and the benefits of generating static files for your autocomplete implementation.

Representing numbers, using sticks and stones.

NHibernate QueryOver examples using the C# library

QueryOver is a powerful wrapper for the NHibernate ORM Criteria API. It is type-safe with a familiar syntax to Lambda expressions and LINQ. This post covers a nice range of real-world usage examples.

Creating an Android app, with a large offline database (over 4GB)

Today we will be covering large SQLite databases with the Android PhoneGap framework. We will be going over the challenges and opportunities of running offline Android apps with scale.

Linking in-text citations to numbered references on a page

In this post, we will be adding a usability feature by adding hover functionality to citations. When hovering over a citation, we will show the corresponding reference text. In this example, we are dealing with unstructured HTML and using a set of business rules to link the citations to references.