Chr*_*che 8 scala jquery-ui callback lift
我想使用带有ajax的自动完成功能.所以我的目标是:
当用户在文本字段中键入内容时,会显示服务器提供的一些建议(我必须在数据库中查找建议)
当用户按下"输入"时,单击除自动完成框之外的其他位置,或者当他/她选择建议时,文本字段中的字符串将被发送到服务器.
我首先尝试使用电梯提供的自动完成小部件,但我遇到了三个问题:
WiringUI.所以,我的问题是:如何组合jquery自动完成并与电梯中的服务器进行交互.我想我应该使用一些回调但我不掌握它们.
提前致谢.
更新这是我尝试的第一个实现,但回调不起作用:
private def update_source(current: String, limit: Int) = {
val results = if (current.length == 0) Nil else /* generate list of results */
new JsCmd{def toJsCmd = if(results.nonEmpty) results.mkString("[\"", "\", \"", "\"]") else "[]" }
}
def render = {
val id = "my-autocomplete"
val cb = SHtml.ajaxCall(JsRaw("request"), update_source(_, 4))
val script = Script(new JsCmd{
def toJsCmd = "$(function() {"+
"$(\"#"+id+"\").autocomplete({ "+
"autocomplete: on, "+
"source: function(request, response) {"+
"response("+cb._2.toJsCmd + ");" +
"}"+
"})});"
})
<head><script charset="utf-8"> {script} </script></head> ++
<span id={id}> {SHtml.ajaxText(init, s=>{ /*set cell to value s*/; Noop}) } </span>
}
所以我的想法是:
SHtml.ajaxText将被包装到自动完成字段中的字段获取所选结果这是你需要做的.
1)确保使用Lift 2.5-SNAPSHOT(这在早期版本中可行,但更难)
2)在用于呈现页面的片段中,使用SHtml.ajaxCall(特别是,你可能想要这个版本:https://github.com/lift/framework/blob/master/web/webkit/src/main/ scala/net/liftweb/http/SHtml.scala#L170),它允许您注册接受搜索词的服务器端函数,并返回包含完成的JSON响应.您还将使用JsContext在JSON响应上注册一些操作.
3)上面的ajaxCall将返回一个JsExp对象,该对象在调用时将产生ajax请求.使用您的代码段将其嵌入页面上的javascript函数中.
4)用一些客户端JS连接它们.
更新 - 一些代码可以帮助您解决问题.它绝对可以用Lift 2.5更简洁地完成,但由于2.4中的一些不一致,我最终滚动了我自己的ajaxCall like函数.S.fmapFunc在服务器端注册该函数,函数体从客户端进行Lift ajax调用,然后在JSON响应上调用res函数(来自jQuery自动完成).
我的jQuery插件"激活"文本输入
(function($) {
$.fn.initAssignment = function() {
return this.autocomplete({
autoFocus: true,
source: function(req, res) {
search(req.term, res);
},
select: function(event, ui) {
assign(ui.item.value, function(data){
eval(data);
});
event.preventDefault();
$(this).val("");
},
focus: function(event, ui) {
event.preventDefault();
}
});
}
})(jQuery);
我的Scala代码导致javascript搜索功能:
def autoCompleteJs = JsRaw("""
function search(term, res) {
""" +
(S.fmapFunc(S.contextFuncBuilder(SFuncHolder({ terms: String =>
val _candidates =
if(terms != null && terms.trim() != "")
assigneeCandidates(terms)
else
Nil
JsonResponse(JArray(_candidates map { c => c.toJson }))
})))
({ name =>
"liftAjax.lift_ajaxHandler('" + name
})) +
"=' + encodeURIComponent(term), " +
"function(data){ res(data); }" +
", null, 'json');" +
"""
}
""")
更新2 - 要将上述功能添加到页面,请使用类似于下面的CssSelector转换.>*表示附加到匹配的脚本元素中已存在的任何内容.我已经在该页面上定义了其他功能,这会将搜索功能添加到它们中.
"script >*" #> autoCompleteJs
您可以查看源以验证它是否存在于页面上,并且可以像任何其他JS函数一样进行调用.
| 归档时间： |
|
| 查看次数： |
1136 次 |
| 最近记录： |