Question

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

外部.jsp：

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

并在我的控制器中：

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

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

提前致谢。

Answer 1

自动填充功能可以获得“选择”事件。在那里你可以做任何你想做的事。

来自documentation

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

以下是a fiddle我的例子。如您所见，一旦选择了自动完成选项，我将更新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);

            }
  });

而且要完全清楚 - “你”可以包含你想要的任何东西。

这里我modified the fiddle包含一个复杂的JS对象。您可以访问所有字段。

我添加了一个日志打印供您查看。使用chrome's developer tools查看日志打印和查看对象的内容。

Jquery / Ajax：如何填充多个字段

1 个答案: