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

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

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

由于

Answer 2

我在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');
}

它接受预输入DOM元素作为参数，即triggerTheTypeAhead($('#yourTypeAhead'))，只要需要触发预输入搜索，就可以调用此方法。

您还可以在angularjs指令中使用相同的功能，但是作为指令，它将导致不必要的多次交易，从而可能会影响该功能。

触发bootstrap typeahead项

2 个答案: