Dec 5, 2018: [EN][Elastic App Search] Quick and easy typeahead search with Elastic App Search


(Peter Kim) #1

Elastic App Search is a Search Solution from Elastic that makes it easier for application developers to implement and manage core search functionality in their user-facing applications. There's no need to understand the nuances of text analysis, relevance scoring algorithms, spell correction, etc.—Elastic App Search provides these features out of the box through a concise API. It also offers an Admin Dashboard to understand user behavior and manage schema, synonyms, and relevance through a GUI.

Getting started is easy

There's a REST API that accepts JSON payloads and also client libraries for Java, Javascript, Node, Python, and Ruby. With the Elastic Stack 6.5.0 release, we now offer an Elastic App Search output plugin for Logstash so you can leverage the dozens of input plugins that Logstash already offers!

Loading NYC open data with Logstash

Enough with the talk, let's get our hands dirty and get some data into App Search. If you're an experienced developer, you can probably write a few lines of Python or Ruby to load a CSV file in your sleep, but since I mentioned the Logstash output plugin, let's give that a try.

First, we need a data set. New York City offers a wealth of open data and since we're trying to keep this simple, we'll just grab the list of subway stations and their locations (there are 473 of them, in case you were curious). We're going to create a simple typeahead search input box to look up subway stations that link to a Google Maps page of the station.

Pre-requisites:

The Logstash config is pretty straight-forward:

input {
  stdin {}
}

filter {
  csv {
    columns => ["url","objectid","name","location","line","notes"]
    skip_header => true
  }
  mutate {
    gsub => [ 
      "location", "POINT \(", "",
      "location", "\)", ""
    ]
    split => {
      "line" => "-"
      "notes" => ","
    }
  }
  dissect {
    mapping => {
      "location" => "%{longitude} %{latitude}"
    }
  }
  mutate {
    replace => {
      "location" => "%{latitude},%{longitude}"
    }
  }
  mutate {
    remove_field => ["message","url","host","latitude","longitude"]
  }
}

output {
  # stdout { codec => rubydebug }
  stdout { codec => dots }
  elastic_app_search {
    api_key => "<your-api-key>"
    engine => "autocomplete-test"
    host => "<your-host-name>"
  }
}

We need some transformation logic under the filter section to get lat,long in the right format for App Search, but the output plugin configuration itself is pretty simple; just specify your API key (one that has write permissions on your engine), the engine name, and the host name.

Next, we need an App Search engine to load our NYC subway station data into. Create an engine:

After you create your engine, get the api-key and host identifier from the Credentials page on the Admin Dashboard:

Update your Logstash config with the api_key, engine, and host parameters of the output plugin with the information on your Admin Dashboard.

Now we're ready to load some data! Run Logstash to load the NYC subway data CSV file from stdin to Logstash:

logstash-6.5.1/bin/logstash -f logstash.conf < DOITT_SUBWAY_STATION_01_13SEPT2010.csv

Hopefully this runs without errors and when you go into the Documents view in your App Search Admin Dashboard, you should see a bunch of documents loaded:

Now that we have data, you can start running example queries immediately by typing in the search field on that Documents section:

Setting up simple typeahead using jQuery UI

jQuery UI is a collection of widgets built on top of the base jQuery library, one of which is an autocomplete widget. It takes only a few lines of code to add the autocomplete widget to an HTML page and configure it to communicate with Elastic App Search as its suggestions source.

To get this example running, we'll run a simple web server in the root of the cloned GitHub repository from above. We'll use python to get this setup on port 8000. After navigating to the root of the GitHub repo, run one of the following commands (depending on your environment):

[python 3] python -m http.server
[python 3; if python executable is named python3] python3 -m http.server
[python 2] python -m SimpleHTTPServer

The example code provides suggestions as you start entering characters. When you click on a result, it opens a new tab to Google Maps at the location of the subway station.

Selecting '42nd St - Bryant Park' should open up a new tab to Google Maps for that geolocation:

Updating search configuration via Admin Dashboard

You may have wondered why 'Franklin St' shows up as the first suggestion when searching for 42. By default, all fields are searchable. 'Franklin St' is the first result because its objectid value is 42. We don't expect our users to search on this objectid value, so we can remove it as a searchable field.

After we make this change and run the search again, we see much better results:

It's that easy to get started with Elastic App Search. Happy Searching Holidays!