>当用户在文本字段中键入内容时,会显示服务器提供的一些建议(我必须在数据库中查找建议)
>当用户按下“输入”时,单击除自动完成框之外的其他位置,或者当他/她选择建议时,文本字段中的字符串将发送到服务器.
我首先尝试使用电梯提供的自动完成小部件,但我遇到了三个问题：
>它意味着是一个扩展选择,也就是说你最初只能提交建议值.
>它并不意味着与ajax一起使用.
>与WiringUI结合使用时会出现问题.
所以,我的问题是：我如何结合jquery autocomplete并与电梯中的服务器进行交互.我想我应该使用一些回调但我不掌握它们.
提前致谢.
更新这是我尝试的第一个实现,但回调不起作用：
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字段获取所选结果,该字段将包含在自动完成字段中
>使用javascript函数更新自动完成建议
解决方法
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),这将允许你注册一个接受你的搜索词的服务器端函数并返回一个包含落成.您还将使用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);
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
