0

我正在使用 jquery/ajax 自动完成，下面是我的简单应用程序的代码片段：

外部.jsp：

    $(function () {
     $("#inputfield").autocomplete({
     source: '/fruitapp/findFruit'
     });
    });

在我的控制器中：

    def findFruit = {
     def fruitsearch= Fruit.withCriteria {
      ilike 'fruit', params.term + '%'
      }
     render (fruitsearch?.'fruit' as JSON)
    }

如您所见，它只会填写一个文本字段，即“输入字段”。现在，我希望如果我从自动完成列表中选择一个项目，它将至少填写两个字段。我该怎么做？

提前致谢。

4

1 回答 1

2

自动完成可以得到一个“选择”事件。在那里你可以做任何你想做的事。

从他们的文档

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

这是我从他们的例子中制作的小提琴。如您所见，一旦选择了自动完成选项，我将更新 2 个不同的 div。

这是负责它的代码：

$( "#tags" ).autocomplete({
            source: availableTags, 
            select:function(e,u){ 


                console.log([e,u]);
                $("#output").text("This is the label:" + u.item.label);
                $("#more_output").text("this is the value:" + u.item.value);

            }
  });

并且要非常清楚 - “u”可以包含您想要的任何内容。

在这里，我修改了小提琴以包含一个复杂的 JS 对象。您可以访问所有字段。

我添加了一个日志打印供您查看。使用chrome 的开发者工具查看日志打印和查看对象的内容。

于 2012-09-02T13:34:43.953 回答