2014-02-21 65 views
0

我的Kendo UI自動完成部件有問題。我只有一個簡單的文本字段,我在其上應用此插件,並且當用戶在提示彈出窗口中選擇一個值時,該值將放入相同的文本字段中,並將另一個放入隱藏字段中(在這種情況下,id所選項目)。Kendo UI Autocomplete Widget:用戶太快

要將數據存儲在隱藏字段中,我使用select事件。

一切工作正常!但不幸的是,如果用戶太快,就會出現問題。 select事件根本不被調用,並且小部件跳轉到關閉事件。所以,正確的值在文本字段中,但隱藏的字段爲空,因爲select事件未被調用。

這裏是我的完整功能:

function myAutoComplete() { 

$("input.autocomplete").each(function() { 

    var thisId = $(this).attr('id'); 

    if (!$(this).data('ac_applied')) { 

     $(this).data('ac_applied',true); 

     var acCase = ''; 
     var parentForm = ''; 
     var parentDiv = ''; 
     var prefixTarget = ''; 
     var selectorTarget = ''; 
     var hiddenVal = ''; 
     var selectedEnt = ''; 

     if ($(this).hasClass('ac-cli')) { 
      acCase = 1; 
      selectorTarget = 'client_id'; 
      hiddenVal = 'dataItem.CLI_NUM'; 
     } 
     else if ($(this).hasClass('ac-ent')) { 
      acCase = 2; 
      selectorTarget = 'entreprise_id'; 
      hiddenVal = 'dataItem.ENT_NUM'; 
     } 
     else if ($(this).hasClass('ac-suc')) { 
      acCase = 3; 
      selectorTarget = 'succursale_id'; 
      hiddenVal = 'dataItem.SUC_NUM'; 
     } 
     else if ($(this).hasClass('ac-res')) { 
      acCase = 4; 
      selectorTarget = 'ressource_id'; 
      hiddenVal = 'dataItem.id'; 
     } 

     parentForm = $(this).closest('form').attr('id'); 
     if ($('#'+parentForm).hasClass('add-item-form')) { 

      parentDiv = $('#'+parentForm).closest('div.add-item-tool-tip').attr('id'); 
      var parentToolTip = $('#'+parentDiv).closest('div.qtip').attr('id'); 

      prefixTarget = '#'+parentToolTip; 
     } 
     else { 
      prefixTarget = '#ajoutTicket'; 
     } 

     $(this).kendoAutoComplete({ 

      dataSource: new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url : "utils/autocomplete.php", 
         cache : false 
        }, 
        parameterMap: function(options, operation) { 
         return { 
          contains: options.filter.filters[0].value, 
          case: acCase, 
          ent: $(prefixTarget + ' input[id*="entreprise_id"]').val() 
         }; 
        } 
       }, 
       schema: { 
        data: "data" 
       }, 
       serverFiltering: true 
      }), 
      open: function(e) { 
       var inputWidth = $('#'+thisId).css('width'); 
       $('div.k-animation-container').width(inputWidth); 
      }, 
      select: function(e){  
       var dataItem = this.dataItem(e.item.index()); 

       switch (acCase) { 
        case 1 : 

         $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.CLI_NUM); 

         if (prefixTarget == '#ajoutTicket') { 

          if (dataItem.CLI_TICKET_EMAIL == 'OUI' && dataItem.ENT_TICKET == 'OUI') { 
           $("#mailchoix_rd1").attr('checked', false); 
           $("#mailchoix_rd2").attr('checked', true); 
          } 
          else if (dataItem.CLI_TICKET_EMAIL == 'NON' && dataItem.ENT_TICKET == 'NON') { 
           $("#mailchoix_rd1").attr('checked', true); 
           $("#mailchoix_rd2").attr('checked', false); 
          } 
          else if (dataItem.CLI_TICKET_EMAIL == 'OUI' && dataItem.ENT_TICKET == 'NON') { 
           $("#mailchoix_rd1").attr('checked', false); 
           $("#mailchoix_rd2").attr('checked', true); 
          } 
          else if (dataItem.CLI_TICKET_EMAIL == 'NON' && dataItem.ENT_TICKET == 'OUI') { 
           $("#mailchoix_rd1").attr('checked', false); 
           $("#mailchoix_rd2").attr('checked', true); 
          } 

          if (dataItem.ENT_FACTURATION == 1) { 
           $("#radio_fact_1").prop('checked', true); 
           $("#radio_fact_2").prop('checked', false); 
           $("#radio_fact_3").prop('checked', false); 
          } 
          else if (dataItem.ENT_FACTURATION == 2) { 
           $("#radio_fact_1").prop('checked', false); 
           $("#radio_fact_2").prop('checked', true); 
           $("#radio_fact_3").prop('checked', false); 
          } 
          else if (dataItem.ENT_FACTURATION == 3) { 
           $("#radio_fact_1").prop('checked', false); 
           $("#radio_fact_2").prop('checked', false); 
           $("#radio_fact_3").prop('checked', true); 
          } 
          else { 
           $("#radio_fact_1").prop('checked', true); 
           $("#radio_fact_2").prop('checked', false); 
           $("#radio_fact_3").prop('checked', false); 
          } 

         } 

         break; 

        case 2 : 
         $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.ENT_NUM); 

         if (prefixTarget == '#ajoutTicket') { 

          if (dataItem.ENT_FACTURATION == 1) { 
           $("#radio_fact_1").prop('checked', true); 
           $("#radio_fact_2").prop('checked', false); 
           $("#radio_fact_3").prop('checked', false); 
          } 
          else if (dataItem.ENT_FACTURATION == 2) { 
           $("#radio_fact_1").prop('checked', false); 
           $("#radio_fact_2").prop('checked', true); 
           $("#radio_fact_3").prop('checked', false); 
          } 
          else if (dataItem.ENT_FACTURATION == 3) { 
           $("#radio_fact_1").prop('checked', false); 
           $("#radio_fact_2").prop('checked', false); 
           $("#radio_fact_3").prop('checked', true); 
          } 
          else { 
           $("#radio_fact_1").prop('checked', true); 
           $("#radio_fact_2").prop('checked', false); 
           $("#radio_fact_3").prop('checked', false); 
          } 

         } 

         break; 

        case 3 : 
         $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.SUC_NUM); 
         break; 

        case 4 : 
         $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.id); 
         break;  
       } 
      }, 
      close: function(e) { 
       alert('close'); 
      }, 
      highlightFirst: true, 
      suggest: true, 
      dataTextField: "SearchField", 
      animation: false, 
      delay: 0 

     }); 
}); 

}; 

能有人給我一隻手或只是我解釋什麼,我做錯了什麼?這將非常感謝!非常感謝你!

回答

0

變化

delay: 0 

delay: 500 

這將強制執行自動完成之前等待從最後KEYUP 500毫秒。 您還可以添加

minLength: 3 

自動完成執行

+0

由於之前強制最少3個鍵的!我會嘗試你的解決方案! – LancelotKiin