Using Lift’s AutoComplete Widget

In this 5 min tutorial I am going to cover how to implement Lift’s AutoComplete widget. I assume that you already have a Lift project setup with SBT.

Widget Dependency

First, add the widget dependency in your Project.scala:

val widgets = "net.liftweb" %% "lift-widgets" % "2.1" 

Configure your Boot class

Widgets generally need to be wired into the ResourceServer in order to serve their CSS and JavaScript etc from the widgets JAR, to the client. This is, for the most part, done by calling “init” on the widget companion object.

  import net.liftweb.widgets.autocomplete.AutoComplete

  class Boot {
    def boot {
      ...
      AutoComplete.init
      ...
    }
  }

Example Snippet

In order to implement this snippet, simply do something along the lines of:

import scala.xml.NodeSeq
import net.liftweb.util.Helpers._
import net.liftweb.widgets.autocomplete.AutoComplete

class AutoCompleteSample {
  private val data = List(
    "Timothy","Derek","Ross","Tyler",
    "Indrajit","Harry","Greg","Debby")

  def sample(xhtml: NodeSeq): NodeSeq = 
    bind("f", xhtml, 
      "find_name" -> AutoComplete("", (current,limit) =>
        data.filter(_.toLowerCase.startsWith(current.toLowerCase)),
        value => println("Submitted: " + value))
    )
}

This snippet simply calls the built in AutoComplete factory which ultimately returns a NodeSeq that is bound to the namespace “f” and the element “find_name”.

Markup

All that remains is to call that in your template with something like:

  <lift:auto_complete_sample.sample form="post">
    <p>Type a name here: <f:find_name></f:find_name></p>
  </lift:auto_complete_sample.sample>

Enjoy