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

【问题标题】：Jquery/Ajax: How to populate Multiple FieldsJquery/Ajax：如何填充多个字段
【发布时间】：2012-09-02 13:30:52
【问题描述】：

我正在使用 jquery/ajax 自动完成，下面是我的简单应用的代码 sn-p：

外部.jsp：

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

在我的控制器中：

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

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

提前致谢。

【问题讨论】：

标签： ajax jquery-ui jquery grails

【解决方案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);

            }
  });

为了清楚起见-“u”可以包含您想要的任何内容。

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

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

【讨论】：

Ahm，我是这些东西的新手，您能否提供一个示例、链接或材料，以便我能够理解该处理程序将做什么以及我将如何使用它。谢谢。
好的，我很感激。谢谢。