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

我试图使用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) 
    } 
}

这是我真正想做的事情。我试过这个，只有在Blur事件被触发。

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

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

来源

2014-04-04 Chetan Kothari

你能发表任何相关的代码吗？你对表单的事件有何约束力？你做了什么没有奏效？ – jcern

@jcern我已经编辑了这个问题。 –

我仍然不完全明白你想要做什么。你想要绑定什么事件 - “OnChange”，“OnClick”，“OnBlur”等...？我假设这两个方法都返回一个'JsCmd'？你说自动完成功能正在工作，但在本例中完全没有提及它。你期望的结果是什么？ – jcern

我将此作为单独的答案添加，因为编辑本质上是一个单独的问题。 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的字符串表示。只要自动完成库不依赖于onBlur事件，就可以实现您正在查找的内容。这种情况也是可行的，但还有更多的工作。

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

来源

2014-04-07 15:13:27 jcern

我试过这样做，但得到一个错误，不太熟悉框架和面临的问题。以下代码 ' “的onblur” - > SHtml.onEvent（回调）.cmd.toJsCmd' 返回：'net.liftweb.util.Helpers.TheStrBindParam' 其中，因为它需要'（字符串，字符串）' 不理解该怎么做。 –

找出问题后，终于想出了如何完成它。这实际上对我有效。 ''#countryNameOnBlur“＃> AutoComplete（默认，建议_，提交_，（”onBlur“，SHtml.onEvent（回调）.cmd.toJsCmd））''。非常感谢你的帮助。 –

你是对的，该参数寻找'String，String'的元组。有一个隐式转换，当你发出'import net.liftweb.util.Helpers._'时将会被导入，它将'_ - > _'转换为'（_，_）'，但为了清楚起见，最好使用Scala默认语法。我会更新答案。 – jcern

如果您正在寻找绑定到同一元素上的不同事件，以便最终得到如下结果：<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>

我不知道你的任何代码需要的参数，所以上面的说明大部分都是说明性的 - 但希望能让你走上正轨。

来源

2014-04-05 17:45:54 jcern

谢谢。我会试试这个，让我知道如果我面临任何困难。是否有任何关于学习Liftweb或任何能帮助我加速学习曲线的指针的建议。我刚从2周前开始。 –

有了Lift，我认为最好的学习方式就是潜入，如果需要的话可以寻求帮助。 Lift [邮件列表]（https://groups.google.com/forum/#!forum/liftweb）是一个非常友好的社区，喜欢帮助人们充分利用Lift - 并通读清单，我们将看到一系列人们遇到的问题的解决方案。如果你想要一个很好的起始参考，[简单提升]（http://simply.liftweb.net/）会给你一个很好的概述。最后，[Lift Cookbook]（http://cookbook.liftweb.net/）提供了一些人们经常试图完成的事例。 – jcern

我正在通过您提到的资源和额外的探索电梯资源。因为我是Lift以及Web开发的新手，所以消化高级概念需要相当长的时间。但很高兴看到人们喜欢你身边，随时准备帮助像我一样被困的人。谢谢。 –

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

回答

相关问题