AutoCompleteExtender 就是類似使用 Google 查詢時會出現的建議視窗
但是原本的在實際使用上會出現一個問題，會造成使用的人都困擾
就是我們可以透過 MinimumPrefixLength="3" CompletionSetCount="20"
來設定在輸入超過 3 碼的時候啟動，並限制回傳顯示的項目 20 個
會出現的問題就是：
1-控制項在頁面稍微偏下面一點
2-剛開始回傳很多，後來隨著輸入的字數增多而回傳項目減少(要慢一點比較能夠感受)
結果呢，因為位置偏下，預設可以回傳 20 個，清單會很長
所以很好心地幫我們把清單位置往上拉，不過隨著輸入的字數增加而清單內容減少
但是它還是掛的高高的，沒注意就忽略掉了
所以找了兩個 solution
1. CSS - 修改清單樣式 (底色與邊框)
CSS的部分
.autocomplete_completionListElement
{
color: #000;
background: #E8F1F4;
padding: 3px 5px;
margin : 0px!important;
border : buttonshadow;
border-width : 1px;
border-style : solid;
border-color : #608D8D;
overflow : auto;
max-height : 100px;
list-style-type : none;
cursor : hand;
}
.autocomplete_highlightedListItem
{
color: white;
background-color: #4A7676;
}
.autocomplete_CompletionListItem
{
color: #000;
background-color: #E8F1F4;
}
2. JavaScript - 固定清單位置
JS的部分
function onResize(objID) {
var completionList = $find(objID).get_completionList();
var textBoxRequest = $find(objID).get_element();
completionList.style.left = getLeft(textBoxRequest) + 2 + "px";
completionList.style.top = getTop(textBoxRequest) + textBoxRequest.offsetHeight + 2 + "px";
}
function getLeft(e) {
var offset = e.offsetLeft;
if (e.offsetParent != null) offset += getLeft(e.offsetParent);
return offset;
}
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
function shownMsg(sender, eventArgs) {
onResize(sender.get_id());
}
最後只要在程式內引用就好了
CompletionListCssClass="autocomplete_completionListElement"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
CompletionListItemCssClass="autocomplete_CompletionListItem"
OnClientShown="shownMsg"
...>
