jQuery自動完成可滾動下拉框

我正在使用jQuery自動完成文本框。我的代碼和腳本工作正常，但現在我需要一個'滾動下拉（沿X和Y軸）'，而不是一個普通的下拉列表。jQuery自動完成可滾動下拉框

腳本用於促進自動完成的下拉菜單：

$(function() { 
    $("#TextBox").autocomplete({ 
     source: "home/search", 
     dataType: 'json', 
     minLength: 1, 
     // max: 10, 
     // scroll:true 
    }); 
});

來源

2011-12-09 RollerCosta

http://jqueryui.com/demos/autocomplete/#event-select一個可以參考這個鏈接，如果停留在同樣的問題

來源

2011-12-09 05:26:08 RollerCosta

好了，所以你可以使用的.ui菜單{列表樣式：無; padding：2px; margin：0; display：block;高度：200像素;溢出：滾動; } in you ui.autocomplete.css – RollerCosta

overflow-y：scroll; overflow-x：scroll; – RollerCosta

@Kannas：你可以更新你的答案，在鏈接中包含代碼嗎？即使鏈接出現故障，答案仍然有用會更好。 –

您可以 x和/或y軸設置爲滾動，但它不是通過自動完成腳本完成的，它是通過自動完成樣式完成的。該腳本不負責如何顯示元素，只是它們如何相互作用。你想改變的特定風格是ui-autocomplete類。

假設您想要最多200px的高度和250px的寬度下拉（如果沒有足夠的結果來填充它，它可以縮小）。如果你想改變大小，只需更改上面的尺寸

.ui-autocomplete { 
    /* these sets the height and width */ 
    max-height:200px; 
    max-width: 236px; 

    /* these make it scroll for anything outside */ 
    overflow-x:scroll; 
    overflow-y:scroll; 
}

：那麼你會添加到您的CSS。如果你想在x軸上不滾動，但保留Y，那麼你將其更改爲：

.ui-autocomplete { 
    /* same as above */ 
    max-height:200px; 
    max-width: 236px; 

    /* note that x is hidden now */ 
    overflow-x:hidden; 
    overflow-y:scroll; 
}

你可以閱讀更多的jQuery UI autocomplete site。我已鏈接到右側的「可滾動結果」部分，您可以點擊「查看源代碼」查看完整示例。他們很好地指出IE不支持最大高度，所以你必須爲IE支持設置一個高度。

來源

2013-03-15 00:35:05

如果有人堅持同樣的問題（要自動完成與垂直滾動）使用這樣的：

.ui-autocomplete 
{ 
    height: 200px; 
    overflow-y: auto; 
}

來源

2016-07-21 09:15:22 Satyanshu

jQuery自動完成可滾動下拉框

回答

相關問題