Question

我有一个来自Ajax Control Toolkit的AutoCompleteExtender。我需要在下拉列表中有一个标题，显示找到了多少项，但它不应该作为项目选择。

我已经尝试过使用jQuery，但即使我只是添加为div，当我点击它时它仍然被选为文本框中的项目：

function clientPopulated(sender, e) { 
    var completionList = $find("AutoCompleteEx").get_completionList();
    var completionListNodes = completionList.childNodes; 
    for (i = 0; i < completionListNodes.length; i++) { 
        completionListNodes[i].title = completionListNodes[i]._value.split(':')[2]; 
    } 
    var resultsHeader;
    if(completionListNodes.length==1000)
       resultsHeader = 'Max count of 1000 reached.<br/>Please refine your search.';
    else if(completionListNodes.length>0)
        resultsHeader =  completionListNodes.length + ' hits.';
    else 
        resultsHeader = msg_NoObjectsFound ;
    jQuery(completionListNodes[0]).before('<div>' + resultsHeader + '</div>');
}

Answer 1

如果您发布自动完成控件的输出html，我们可以给出更好的答案。无论如何，如果它是一个下拉控件;

jQuery(completionListNodes[0]).before('
<option value="-99" disabled="disabled">your message here</option>'
);

Answer 2

answer by Yuriy帮助我解决了这个问题，所以我给了他一些信任，尽管他的解决方案需要做一些改变。

首先，在初始化时执行clientShowing事件（通过在AutoExtender控件中设置OnClientShowing = "clientShowing"映射）。在这里，我们覆盖_setText方法，以确保在单击header元素时没有任何反应。我已经使用了Yuriy的回答中最重要的想法，这对我来说真的很有用。我只更改为检查css类而不是ref属性值。

function clientShowing(sender, e) { 
    var extender = sender; 
    var oldSetText = extender._setText; 
    extender._setText = function (item) { 
        if (jQuery(item).hasClass('listHeader')) { 
            // Do nothing. The original version sets the item text to the search 
            // textbox here, but I just want to keep the current search text.
            return; 
        } 
        // Call the original version of the _setText method
        oldSetText.call(extender, item); 
    }; 
}

那么我们需要将header元素添加到列表的顶部。这必须在clientPopulated事件中完成（通过在AutoExtender控件中设置OnClientPopulated = "clientPopulated"进行映射）。每次填写完搜索结果后都会执行此事件，因此我们在此处有正确的搜索计数。

function clientPopulated(sender, e) { 
    var extender = sender; 
    var completionList = extender.get_completionList();
    var completionListCount = completionList.childNodes.length; 
    var maxCount = extender.get_completionSetCount();
    var resultsHeader;
    if(completionListCount == maxCount)
       resultsHeader = 'Max count of ' + maxCount + ' reached.<br/>'
                     + 'Please refine your search.';
    else if(completionListCount > 0)
        resultsHeader =  completionListCount + ' hits.';
    else 
        resultsHeader = 'No objects found';

    jQuery(completionList).prepend(
       '<li class="listHeader">' + resultsHeader + '</li>'); 
}

我还创建了一个新的css类来正确显示它。我使用!important来确保这会覆盖从AutoExtender控件添加的mousover样式。

.listHeader 
{
    background-color : #fafffa !important;
    color : #061069 !important;
    cursor : default !important;
}

在AutoCompleteExtender列表中显示静态不可点击的标题

2 个答案: