Question

我有一个包含用户的数据库，每个用户都有一个帐号。我试图让用户使用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>

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

Answer 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>");

            }
        });
    });

};

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

1 个答案: