触发引导预输入项

Question

我正在使用 typeahead.js 来动态显示项目编号列表。当用户选择一个项目时，我有一个 Ajax 函数来获取项目余额并显示它们。这一切都很好。 我的问题是当我刷新页面并重新填充表单时。选定的项目 id 已填充，但我不知道如何再次触发 Ajax 脚本。

这是我最初用来在用户选择项目时触发代码的代码：$('input.typeahead').on('typeahead:selected', function (event, selection) { typeaheadSelected(selection, event); });

这是调用的ajax函数：

function typeaheadSelected($prsy, event) {
            $('#project-distribution-loading').show();

            //set the id of the selected bloc
            if (event != null) {
                var id = event.target.id;
                $id = id.slice(-1);
            } else {
                $id = 0;
            }
            if (!$.isNumeric($id)) {
                $id = 0;
            }
            $.ajax({
                url: "../Helper/GetProjectDetails",
                data: ({ prsy: $prsy }),
                type: "GET",
                success: function (data) {
                    $('#pi-details-panel').show(500);
                    data = JSON.parse(data);
                    if ($id == 0) {
                        $('#project-id-details').html($prsy);
                    }
                    else {
                        $('#project-id-details-' + $id).html($prsy);
                    }

                    //Convert amounts to currencies
                    $('#currency-transformation').val(data.FundAvailableAmount).currency();
                    $fundAmt = $('#currency-transformation').val();
                    if ($id == 0) {
                        $('#project-availability-details').html($fundAmt);
                    } else {
                        $('#project-availability-details-' + $id).html($fundAmt);
                    }
                    $('#currency-transformation').val(data.PendingRFApprovalOTPSAmount).currency();
                    $pendAmt = $('#currency-transformation').val();
                    $('#currency-transformation').val(data.NetAvailableAmount).currency();
                    $netAmt = $('#currency-transformation').val();

                    //Populate popover content
                    if ($id == 0) {
                        $popoverContent = "<span>Fund Amount</span><span class='right' id='popover-funding'>" + $fundAmt + "</span><br/>" +
                                      "<span>Pending Amount</span><span class='right' id='popover-funding'>" + $pendAmt + "</span><br/>" +
                                      "<span>Total Amount</span><span class='right' id='popover-funding'>" + $netAmt + "</span><br/><br/>" +
                                      "<a href='#' data-toggle='modal' data-target='#project-funding-history-modal' id='funding-history-modal'><i class='glyphicon glyphicon-stats'></i>&nbsp;&nbsp;Project Budget & Expense Report</a>";
                        $('#funding-popover').attr('data-content', $popoverContent);
                    } else {
                        //Populate popover content
                        $popoverContent = "<span>Fund Amount</span><span class='right' id='popover-funding-" + $id + "'>" + $fundAmt + "</span><br/>" +
                                          "<span>Pending Amount</span><span class='right' id='popover-funding-" + $id + "'>" + $pendAmt + "</span><br/>" +
                                          "<span>Total Amount</span><span class='right' id='popover-funding-" + $id + "'>" + $netAmt + "</span><br/><br/>" +
                                          "<a href='#' data-toggle='modal' data-target='#project-funding-history-modal-" + $id + "' id='funding-history-modal-" + $id + "'><i class='glyphicon glyphicon-stats'></i>&nbsp;&nbsp;Project Budget & Expense Report</a>";
                        $('#funding-popover-' + $id).attr('data-content', $popoverContent);
                    }

                    //popover tooltip
                    $popoverId = "";
                    if ($id == 0) {
                        $popoverId = '#funding-popover';
                        $fundingTable = '#project-funding-history-modal';
                    } else {
                        $popoverId = '#funding-popover-' + $id;
                        $fundingTable = '#project-funding-history-modal-' + $id;
                    }

                    var popover = $($popoverId).popover({ trigger: "manual", html: true, animation: true })
                        .on("mouseenter", function () {
                            var _this = this;
                            $(this).popover("show");
                            $(".popover").on("mouseleave", function () {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function () {
                            var _this = this;
                            setTimeout(function () {
                                if (!$(".popover:hover").length) {
                                    $(_this).popover("hide");
                                }
                            }, 300);
                        });

                    //Build the funding history
                    $($fundingTable).find("tr:gt(0)").remove();

                    if (data.ProjectBudgetAndExpenseSummaryData.PostingBalance != null) {

                        $.each(data.ProjectBudgetAndExpenseSummaryData.PostingBalance, function (i, item) {
                            $row = "<tr><td>" + item.Account + "</td><td>" + item.AccountName + "</td><td>" + item.Budget + "</td><td>" + item.Enc + "</td><td>" + item.Ptd + "</td><td>" + item.Avl + "</td></tr>";
                            $($fundingTable).find('tbody').append($row);
                        });

                    }
                    $('#project-distribution-loading').hide();
                    if ($id == 0) {
                        $('#project-number-label').hide();
                        $('#project-distribution-details').show();
                    } else {
                        $('#project-number-label-' + $id).hide();
                        $('#project-distribution-details-' + $id).show();
                    }
                    return false;
                },
                error: function (data) {
                    alert("error");
                    return false;
                }
            });

在 jQuery 中是否可以选择具有“.typeahead”类的所有输入的预输入列表的第一项？

提前致谢。

Answer 1

我在 angularjs 中使用 twitter bootstrap angular-ui typeahead。为了通过我使用以下方法的代码触发预先输入（已经有一个值）：

function triggerTheTypeAhead($target) {
    var origVal = $target.eq(0).val();
    $target.eq(0).val('').trigger('input')
    .eq(0).val(origVal).trigger('input');
}

它接受 typeahead DOM 元素作为参数，即triggerTheTypeAhead($('#yourTypeAhead'))，您可以在需要触发 typeahead 搜索时调用此方法。

您也可以在 angularjs 指令中使用相同的功能，但作为指令会导致不需要的多个事务，可能会影响功能。

Answer 2

最后，我不得不为它找到一个 hack，因为我在文档中找不到任何东西。为了自动触发 typeahead，我必须将焦点设置在每个输入上以填充数据集，然后使用元素 ID 并调用 ajax 脚本（我必须修改它以访问 ID 号而不是事件）。

我确信有更简洁的方法可以做到这一点，如果您找到更好的解决方案，我很乐意更改我的代码。

谢谢