jQuery自动完成将选择添加到div

Question

我正在使用 jQuery 中的自动完成插件，我想将我的结果选择附加到带有其他元素的 div 元素：隐藏输入和文本输入。

这是我的html代码：

这是我在 jQuery 中的函数：

$("#buscar").autocomplete({
    source: "procesos/buscarPersona.php",
    minLength: 2,
    select: function( event, ui ) {
        $("#acreditados")
            .append('<div class="col50"><p>'
            + '<input type="hidden" name="id" value="' + ui.item.id_persona + '"/>'
            + ui.item.value 
            + '</p></div>'
            + '<div class="col50 f-right"><p>Monto:' 
            + '<input type="text" /></p></div>');
        }
});

现在我的代码工作正常，但是我发现很难维护显示选择结果和附加输入的附加函数。有没有办法可以使用 load() 函数来使这更简单？最终输出必须附加多个选择，而不仅仅是最后一个选择

Answer 1

不要使用load，load是Ajax，意思是与服务器通信，对于每一个选择，除非你需要一些验证或更复杂的逻辑，我们应该避免网络访问。

如果您使用负载，那么对于每个选择，您都将与您的服务器进行通信，然后它会将 html 传递给您。

恕我直言，这个解决方案看起来很难看，但效率更高。

编辑：

单独保留这个 div：

    <div class="dynamiccontentcont">
       <div class="col50">
          <p><input type="hidden" name="id" value=""/></p>
       </div>
      <div class="col50 f-right">
         <p>Monto:<input type="text" /></p>
     </div>
   </div>

选择时

1. 调用jQuery('.dynamiccontentcont').clone()克隆这个div
2. 放置选定的值（正如您当前在代码中所做的那样）
3. 在代码中添加 div