2016-11-12 38 views
0

爲了顯示不僅僅只是產品名稱更多數據本身我已經改變了自動完成控制的呈現自定義行後不再工作。該控件完全按照預期呈現,但是當我使用箭頭鍵導航到一行時,它不會自行選擇一行。劍道自動完成 - 鍵盤導航不

但是,當將鼠標懸停在第一行上並且然後開始使用箭頭鍵時,它的工作原理就像它曾經工作過的一樣,我可以使用enter來選擇。只有突出缺乏。

我想實現以下目標:

  • 爲了獲得向下箭頭工作打字,而不必懸停在第一
  • 獲取所選行,從而具有不同的風格的行後直(如背景色),使用戶可以看到該行被選中

我試圖攔截自動完成什麼呢類或樣式設置爲選定行的條件,但我不是成功的在得到它顯示什麼它會這樣做隱藏我進入Firebug和其他達到相同效果的工具的時刻。

我也想不通爲什麼第一次向下箭頭不起作用。我認爲控制器不能再找到一行了,現在通過引入帶有表頭的佈局變得更復雜了,但我不確定。

function CreateAutocompletes() { 
    $('[data-autocomplete]').each(function (index, element) { 
     var requestUrl = $(element).attr('data-action'); 
     var elm = $(element).autocomplete({ 
      minLength: 2, 
      source: function(request, response) { 
       var warehouseId = $('#WarehouseId').val(); 
       $.ajax({ 
        url: requestUrl, 
        dataType: 'json', 
        data: { 
         query: request.term, 
         warehouseId: warehouseId 
        }, 
        success: function(data) { 
         response($.map(data, function(item) { 
          return { 
           value: item.Name, 
           realValue: item.ProductId, 
           label: item.Name, 
           ProductId: item.ProductId, 
           SKU: item.SKU, 
           Name: item.Name, 
           Stock: item.Stock, 
           Ordered: item.Ordered, 
           BulkOrdered: item.BulkOrdered, 
           Underway: item.Underway, 
           Surplus: item.Surplus 
          }; 
         })); 
        } 
       }); 
      }, 
      select: function(event, ui) { 
       var hiddenFieldName = $(this).attr('data-value-name'); 
       $('#' + hiddenFieldName).val(ui.item.ProductId); 
       $(this).parent().next().children().first().focus(); 
      } 
     }).data("ui-autocomplete"); 

     elm._renderItem = function (table, item) { 
      return $("<tr class='ui-menu-item'></tr>") 
       .append("<td><a>" + item.SKU + "</a></td><td><a>" + item.Name + "</a></td>" + 
       "<td><a>" + item.Stock + "</a></td><td><a>" + item.Ordered + "</a></td><td><a>" + item.BulkOrdered + "</a></td>" + 
       "<td><a>" + item.Underway + "</a></td>") 
       .appendTo(table); 
     }; 

     elm._renderMenu = function(ul, items) { 
      var self = this; 
      ul.append("<table class='table table-striped'><thead><tr class='ui-menu-item'><th>" + Translations.SKU + "</th><th>" + Translations.Name + "</th>" + 
       "<th>" + Translations.Stock + "</th><th>" + Translations.Ordered + "</th><th>" + Translations.BulkOrdered + "</th><th>" + Translations.Underway + "</th>" + 
       "</tr></thead><tbody></tbody></table>"); 
      $.each(items, function(index, item) { 
       self._renderItemData(ul.find("tbody"), item); 
      }); 
     }; 
    }); 
} 

我只需要註釋掉elm._renderItem和elm._renderMenu恢復到以前的行爲和工作方式類似打算。

回答

0

經過一番研究後,我發現它試圖在li -tag和a -tag中設置一個名爲ui-state-focus的類,然後它包含背景和邊框。

由於在a - 標籤上面的修改後的版本被反覆幾次後它可能對嗆。我已經創建了一個醜陋的黑客,通過與具有固定寬度跨度創建一個虛假的表的作品,這甚至與頭的工作原理:

elm._renderItem = function (table, item) { 
     return $("<li role='option' class='option' style='width:920px'>") 
      .append("<a><div style='width:120px' >" + 
       item.SKU + 
       "</div><div style='width:500px; overflow:hidden'>" + 
       item.Name + 
       "</div><div style='width:70px'>" + 
       item.Stock + 
       "</div><div style='width:70px'>" + 
       item.Ordered + 
       "</div><div style='width:70px'>" + 
       item.BulkOrdered + 
       "</div><div style='width:70px'>" + 
       item.Underway + 
       "</div></a></li>") 
      .appendTo(table); 
    }; 

    elm._renderMenu = function(ul, items) { 
     var self = this; 
     ul.append("<li class='autocomplete-header'><div style='width:120px'>" + 
      Translations.SKU + 
      "</div><div style='width:500px;overflow:hidden'>" + 
      Translations.Name + 
      "</div><div style='width:70px'>" + 
      Translations.Stock + 
      "</div><div style='width:70px'>" + 
      Translations.Ordered + 
      "</div><div style='width:70px'>" + 
      Translations.BulkOrdered + 
      "</div><div style='width:80px'>" + 
      Translations.Underway + 
      "</div></li>"); 
     $.each(items, function(index, item) { 
      self._renderItemData(ul, item); 
     }); 
    }; 

這不是漂亮,可能是你應該做的,而不是硬帶班列寬編碼值,但至少應該讓你在路上遇到同樣的問題。

如果有更好的解決方案,我想聽聽它!