trigger bootstrap typeahead item

Question

Я использую typeahead.js для динамического отображения списка номеров проектов. Когда пользователь выбирает один проект, у меня есть функция Ajax, которая извлекает балансы проекта и отображает их. Все это прекрасно работает. Моя проблема в том, когда я обновляю страницу и повторно заполняю форму. Выбранный идентификатор проекта заполнен, но я не знаю, как снова запустить сценарий Ajax.

Это код, который я первоначально использовать для запуска кода, когда пользователь выбирает проект: $('input.typeahead').on('typeahead:selected', function (event, selection) { typeaheadSelected(selection, event); });

Это функция Аякса называется:

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, чтобы выбрать первый пункт списка типов во всех вводах с классом '.pepehead'?

Заранее спасибо.

Answer 1

В конце концов, мне пришлось найти взломать его, потому что я не мог найти ничего в документации. Чтобы автоматически запускать typeahead, я должен настроить фокус на каждом входе, чтобы заполнить набор данных, а затем использовать идентификатор элемента и вызвать сценарий ajax (который мне пришлось модифицировать для доступа к идентификационным номерам, а не к событию).

Я уверен, что есть более чистые способы сделать это, и если вы найдете лучшее решение, я с радостью изменю свой код.

Благодаря