自动完成以显示帐户详细信息答案

【问题标题】：Auto complete to show account details自动完成以显示帐户详细信息
【发布时间】：2014-02-02 15:00:14
【问题描述】：

我有一个包含用户的数据库，每个用户都有一个帐号。我试图让用户通过使用 Javascript 自动完成表单字段相互搜索。（用户开始输入其他用户的帐号以显示帐户下拉列表。

这是我的下拉字段

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
</script>

我的问题是如何在选择帐号时在表单下方显示用户详细信息？

【问题讨论】：

您的标签似乎都不相关，所以我用一些相关的标签替换了它们。如果其中一个语言标签毕竟是相关的，请指定如何更准确地提供帮助。

标签： javascript jquery autocomplete

【解决方案1】：

您可以使用选择选项：

<script>
window.onload = function () {
    $( document ).ready(function() {
        $("#consumidor-autocomplete").autocomplete({
            source: function (request, response) {
                $.getJSON("/consumidors.json?term=" + request.term, function (data) {
                    response($.map(data, function (value, key) {
                        return {
                            label: value.nome,
                            value: value.nome,
                            id: value.id,
                            saldo: value.saldo,
                            operacao: value.operacao
                        };
                    }));
                });
            },
            select: function (event, ui) {
                var id = ui.item.id,
                    saldo = ui.item.saldo,
                    operacao = ui.item.operacao;
                $("#consumidor").val(id);
                $("#show-saldo").html("<span>Operação: " + operacao + "</span><br/><span>Saldo: R$ " + saldo + "</span>");

            }
        });
    });

};

【讨论】：