So, here's a thing I started using recently in a web app I was building.

Did you know there exists a native HTML solution to those beloved Autocomplete widgets? It's called datalist, and you can use it today (sort of).

Use it

Datalist is pretty easy to use. Here's how:

  <input type="text" list="yourlist">
<datalist id="yourlist">
    <option>A thing</option>
    <option>Another thing</option>
</datalist>

Pretty cool, right? Start typing "A thing" in the demo below to see how it works.

On Chrome at least, we get a drop down arrow at the right indicating that this text input has a list of items attached to it. The browser also performs an automatic autocomplete – no JS required!

Hooking it Up

I challenged myself to see if I could hook up a datalist to a live data source.

I set these requirements:

  • Get a list of movies after typing a search phrase
  • Use a timer as to not overload the endpoint with queries
  • Update the datalist with the results

I decided to go with the Rotten Tomatoes API for my movie searches. They make it pretty easy to set up a developer account and a free API key.

Listen

Using JavaScript, we listen and fire a function called setTimer after every keyup event:

  setTimer: function() {
  if ( this.timer ) {
    clearTimeout(this.timer);
  }

  this.timer = setTimeout( this.processQuery.bind(this), this.delay );
}

We make sure to clear the current timer if there was already one set. That means that when you are typing a name, your query doesn't stop unless you pause (in this case, for 300 milliseconds).

Process

Once our timer has fired, we're ready to grab the query and send it to Rotten Tomatoes.

    processQuery: function() {
    var query = this.input.val();

    if ( ! query ) {
      return false;
    }

    $.ajax({
      dataType: 'jsonp',
      url: this.rtApiEndpoint,
      data: {
        apikey: this.rtApiKey,
        q: query
      },
      success: this.updateMovieList.bind(this)
    });
  }

Pretty straightforward. If the query is empty, we return without doing anything. If it's not, we send it on to Rotten Tomatoes along with our API key and wait.

On success, we send our results to another function called updateMovieList.

Update List

Now that we've got our results, we can add them to the datalist.

    updateMovieList: function( response ) {
    if ( 'object' === typeof( response.movies ) ) {
      var movies = response.movies;

      // Clear the list
      this.list.html('');

      $.each( movies, function(idx, movie) {
        this.list.append('<option>' + movie.title + '</option>');
      }.bind(this));
    }
  }
};

Here, we clear the list and loop through each of the movies using jQuery's handy $.each utility function.

Try it out

How's that? Give it a go on your own.

Now try hooking up some other APIs and see what you can do. You could also listen for a blur event (when a user leaves the input) or a keydown event and check for the Enter key – then do something with the user's choice.

Some ideas:

  • After hitting enter, show the artwork, title, and director of the movie chosen below.
  • Hit up the Flickr API and search for images by tag or title. Display them below.
  • Hit up YouTube and embed the chosen video below.

Enjoy!


2,425 0 15