我想使用 ajax 自动完成功能。所以我的目标是:
当用户在文本字段中输入内容时，会出现服务器提供的一些建议(我必须在数据库中查找建议)
当用户按“Enter”键、单击自动完成框中的其他位置或当他/她选择建议时，文本字段中的字符串将发送到服务器。
我首先尝试使用 lift 提供的自动完成小部件，但遇到了三个问题:
- 它是一个扩展选择，也就是说你最初只能提交建议值。
- 它不适合与 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 )，这将允许您注册一个接受您的搜索词并返回的服务器端函数包含补全的 JSON 响应。您还将使用 JsContext 注册在 JSON 响应上发生的一些操作。
3) 上面的 ajaxCall 将返回一个 JsExp 对象，该对象在调用时将导致 ajax 请求。使用您的代码片段将其嵌入到页面上的 JavaScript 函数中。
4) 将它们与一些客户端 JS 连接起来。
更新 - 一些可以帮助您的代码。使用 Lift 2.5 肯定可以更简洁地完成，但由于 2.4 中的一些不一致，我最终推出了自己的 ajaxCall 之类的函数。 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 函数一样被调用。
关于jquery-ui - Lift - 使用 Ajax 提交自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10043179/