如何顯示「上面」輸入元素

Question

我使用jQuery Tokeninput插件顯示的音樂藝術家名稱的自動完成列表，通過JSONP交付的下拉列表。

這一切工作正常，但我需要輸入在頁面含義，當然，在下拉列表本身熄滅頁面底部的固定頁腳。

我想這種反轉行爲，並有下拉「上面」的輸入元素列表apear，但我似乎無法找到一種方法來實現這一目標。

任何想法？

Answer 1

我認爲你必須更改代碼show_dropdown（）功能，裏面jquery.tokeninput.js文件：

function show_dropdown() { 
     dropdown 
      .css({ 
       position: "absolute", 
       top: $(token_list).offset().top + $(token_list).outerHeight(), 
       left: $(token_list).offset().left, 
       zindex: 999 
      }) 
      .show(); 
    } 

只需適當調整「頂」廣告「左」的參數。

Answer 2

我修改show_dropdown功能可以自動確定是否它應該顯示的上方或下方：

function show_dropdown() { 
    if (input_box.is(':focus')) { 
     var windowHeight = $(window).height(); 
     var docViewTop = $(window).scrollTop(); 
     var dropdownPosition = $(token_list).offset().top + $(token_list).outerHeight(); 
     var availableSpace = windowHeight - (dropdownPosition - docViewTop) 
     var borderWidth = parseInt(dropdown.css('border-bottom-width')); 

     if (availableSpace >= (settings.maxHeight + 2 * borderWidth)) { 
      dropdown.css('bottom', ''); 
      $('body').css('position', ''); 

      dropdown.css({ 
       'border-top-width': 0, 
       left: $(token_list).offset().left, 
       top: $(token_list).offset().top + $(token_list).outerHeight() 
      }); 
     } else { 
      dropdown.css('top', ''); 

      var bodyHeight = $('body').outerHeight(); 
      var bodyTop = $('body').offset().top; 
      var bottom; 

      if ((bodyHeight + bodyTop) < dropdownPosition) { 
       bottom = dropdownPosition - (bodyTop + bodyHeight) ; 
      } 
      else { 
       bottom = (bodyTop + bodyHeight) - ($(token_list).offset().top + borderWidth); 
      } 

      dropdown.css({ 
       'border-top-width': borderWidth, 
       'border-top-color': dropdown.css('border-bottom-color'), 
       'border-top-style': dropdown.css('border-bottom-style'), 
       'bottom': bottom, 
       'left': $(token_list).offset().left - parseInt($('body').css('margin-left')), 
       'position': 'absolute' 
      }); 
      $('body').css({ 
       'position': 'relative' 
      }); 
     } 
     dropdown.css({ 
      maxHeight: settings.maxHeight, 
      overflow: 'auto', 
      zIndex: settings.zIndex 
     }).show(); 
    } 
} 

我還添加一個maxHeight屬性tokenInput並用它來檢查這兩個空間和集的大小下拉。

試一下這裏：http://jsfiddle.net/colin_young/dvuHD/19/（注意我的版本有一些股票版本的重大修改，我只是沒有機會爲他們創建拉請求）。

不嘗試以確保然而上方的空間。假設是，如果沒有下面的空間，沒有上面的空間，你可以做的不多，儘管以輸入元素爲中心可能是一個很好的折衷。