Question

我有一个只包含jQuery自动填充文本字段的页面如果用户执行了搜索并从下拉列表中选择了一个项目，则自动完成程序下方的网格应显示平滑，其中包含所选项目的数据。
另一方面，如果没有找到数据，则自动填充程序下的面板应该顺利包含几个按钮和文本。

非常感谢有关如何实现这一目标的任何提示。

Answer 1

最难的部分是确定自动完成的结果集中是否没有返回结果，但是are ways to do that。您没有提到您是使用远程数据源还是本地数据源，或者您的数据是什么样的，但这应该可以帮助您了解该怎么做。

将函数引用传递给source参数。在该函数内部，如果没有返回结果，请执行一些特殊操作。或者，您可以在上面的答案中概述的自定义事件处理程序中编写这样的代码：
```
source: function(request, response) {
    var result = $.ui.autocomplete.filter(src, request.term);
    if (!result.length) {
        $("#container")
            .hide()
            .html("<strong>" + request.term + "</strong> Not Found.")
            .fadeIn(3000);

    }
    response(result);
},
```
在这里，我只是淡化了一些带有<strong>标签的内容（我知道你想要按钮和其他一些东西，但想法是一样的。）

为select事件定义事件处理程序，并在select：

上显示不同的HTML

select: function(event, ui) {
    $("#container")
        .hide()
        .html("<table><tr><td>" + ui.item.value + "</td><td><a href='" + ui.item.info + "'>" + ui.item.info + "</a></td></tr></table>")
        .fadeIn(3000);
}

此示例假设您在自动填充中的每个项目上都有一个名为info的属性，并绘制一个简单的表格。

示例： http://jsfiddle.net/andrewwhitaker/wBePy/

备注：

虽然它不直观，但您实际上可以在每个自动完成响应项中包含任何属性。您可以使用ui.item.propertyName在事件处理程序中按名称访问这些属性。

如果您要附加大量内容，我建议您使用某种客户端模板，例如jQuery.tmpl

您可以使用fadeIn，show或animate顺畅添加内容。

根据Autocompleter输出显示不同的面板

1 个答案: