Raise your JavaScript abstraction layer

I am trying to run the following example from the book “Learning the Elevator” (with minor changes, that is, I preferred CSS binding to XML binding):

object Hello {
  import js.{JxMap, Jx, JsCmds, JE}
  import JE._
  import net.liftweb.http.SHtml._
  import net.liftweb.util.BindHelpers._
  import JsCmds._

  val names = "marius" :: "tyler" :: "derek" :: "dave" :: "jorge" :: "viktor" :: Nil
  def ajaxian =
    "#text" #> ajaxText("Type something", {value => {
      val matches = names.filter(e => e.indexOf(value) > -1)
      SetHtml("items_list", NodeSeq.Empty) &
      JsCrVar("items", JsArray(matches.map(Str(_)):_*)) &
      JsCrVar("func", Jx(<ul>{
        JxMap(JsVar("it"), Jx(<li>{JsVar("it")}</li>))
      }</ul>).toJs) &
      (ElemById("items_list") ~> JsFunc("appendChild", Call("func", JsVar("items"))))
    }})
}

But I keep getting the list of "JsExp (it)" elements when rendering to an HTML page instead of the names in the list with the same name. There must be something wrong with the line

JxMap(JsVar("it"), Jx(<li>{JsVar("it")}</li>))

Lack of documentation on the level of JavaScript abstraction and reading the relevant sections in books and viewing sources of elevators do not lead me to an understanding of what is happening. The only thing I can understand so far is what Jxcreates AnonFuncwith the parameter it, but I cannot convince myself of the correct use JsVar("it")in the example provided by Derek in his book.