Question

我正在尝试使用Liftweb框架将自动完成和onBlur功能附加到同一输入字段。

我让他们独立工作。

我正在尝试做的是拥有一个自动完成输入字段，并且在从建议中选择值时，将执行一些业务逻辑并且需要更新另一个输入字段。

但只有自动完成功能才有效。

这是表格

<form class="lift:CapitalOnBlur">
  Country : <input id="countryNameOnBlur" type="text" name="countryNameOnBlur"/><br />
  Capital: <input id="capitalNameOnBlur" type="text" name="capital"/>
</form>

这是片段

object CapitalOnBlur {

  val capitals: Map[String, String] = Map(
    "india" -> "New Delhi",
    "uganda" -> "Kampala",
    "japan" -> "Tokyo")

  def render = {

    def callback(countryName: String): JsCmd = {
      val capital = capitals.getOrElse(countryName.toLowerCase, "Not Found")
      SetValById("capitalNameOnBlur", capital)
    }

    val default = ""

    def suggest(value: String, limit: Int) = capitals.filter(_._1.startsWith(value.toLowerCase)).keys.toSeq

    def submit(value: String) = Unit

    "#countryNameOnBlur" #> AutoComplete(default, suggest, submit) &
    "#countryNameOnBlur [onBlur]" #> SHtml.onEvent(callback)
  }
}

这就是我真正想要做的。我尝试了这个，只触发了onBlur事件。

根据我的需要，当我开始在第一个输入字段中输入国家名称时，它应该向我显示建议和选择建议，即;来自该输入字段的onBlur，相应的大写应该在下一个输入字段中呈现。

还有一种方法可以使用内置的电梯自动完成功能触发选择建议的操作。

Answer 1

我将此作为单独的答案添加，因为编辑本质上是一个单独的问题。 Lift中的AutoComplete小部件不会修改页面上的现有元素，而是将其替换为以下NodeSeq per the source。

  <span>
    <head>
      <link rel="stylesheet" href={"/" + LiftRules.resourceServerPath +"/autocomplete/jquery.autocomplete.css"} type="text/css" />
      <script type="text/javascript" src={"/" + LiftRules.resourceServerPath +"/autocomplete/jquery.autocomplete.js"} />
      {Script(onLoad)}
    </head>
    <input type="text" id={id} value={default.openOr("")} />
    <input type="hidden" name={hidden} id={hidden} value={defaultNonce.openOr("")} />
  </span>

由于现在已经替换了原始HTML，因此添加onBlur处理程序的第二行不适用于任何有用的内容。但是，AutoComplete构造函数确实为属性提供了一个可选参数，您可以使用它来为输入标记添加onBlur属性。

您可以尝试这样的事情：

"#countryNameOnBlur" #> AutoComplete(default, suggest, submit, 
  ("onBlur", SHtml.onEvent(callback).cmd.toJsCmd))

上面应该传入一个元组，它指定了属性名称，以及你想要执行的Javascript的字符串表示。只要AutoComplete库不依赖于onBlur事件，这应该可以完成您要查找的内容。这种情况也是可行的，但需要更多的工作。

另外需要注意的是，当输入失去焦点时会触发onBlur，即：用户将光标移动到另一个字段。如果您希望在文本发生变化时随时触发，无论光标位置如何，您可能更喜欢onChange事件。

Answer 2

如果您希望绑定同一元素上的不同事件，以便最终得到类似<input onblur="getCapitalName" onchange="autoComplete">的内容，则可以尝试使用SHtml.onEvent。你的代码片段中的这类内容应该可以解决问题：

object CapitalOnBlur {
  def render = 
    "* [onblur]" #> SHtml.onEvent(e => CapitalOnBlur.getCapitalName(e)) &
    "* [onchange]" #> SHtml.onEvent(e => CapitalOnBlur.autoComplete(e)) &

  ...
}

然后从您的输入中调用代码段，如下所示：

<form>
  Country : <input id="countryNameOnBlur" data-lift="CapitalOnBlur" type="text" name="countryNameOnBlur"/><br />
</form>

我不确定你的代码有什么参数，所以上面的内容大部分是说明性的 - 但希望能让你顺利上路。

如何将多个片段绑定到表单中的一个输入字段

2 个答案: