Показывать статический не кликабельный заголовок в списке AutoCompleteExtender

Question

У меня есть AutoCompleteExtender из Ajax Control Toolkit.Мне нужно иметь заголовок в раскрывающемся списке, который показывает, сколько элементов найдено, но его нельзя выбирать как элемент.

Я пробовал это с помощью 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

Добавьте OnClientItemSelected и OnClientShowing обработчики событий и попробуйте скрипт ниже:

function itemSelected(sender, args) {
     if (args.get_value() == null) {
          sender._element.value = "";
     }
}

function clientShowing() {
     var extender = $find("AutoCompleteEx");
     var optionsCount = extender.get_completionSetCount();

     var message = "";
     if (optionsCount == 1000) {
          message = 'Max count of 1000 reached.<br/>Please refine your search.';
     }
     else if (optionsCount > 0) {
          message = optionsCount + " hits."
     }
     else {
          message = "oops."
     }

     jQuery(extender.get_completionList()).prepend("<li style='background-color:#ccc !important;'>" + message + "</li>");
}

Добавлено: вы даже можете сделать это без обработчика OnClientItemSelected:

function clientShowing() {
     var extender = $find("AutoCompleteEx");
     var oldSetText = extender._setText;
     extender._setText = function (item) {
          if (item.rel == "header") {
               extender._element.value = "";
               return;
          }
          oldSetText.call(extender, item);
     };

     var optionsCount = extender.get_completionSetCount();

     var message = "";
     if (optionsCount == 1000) {
          message = 'Max count of 1000 reached.<br/>Please refine your search.';
     }
     else if (optionsCount > 0) {
          message = optionsCount + " hits."
     }
     else {
          message = "oops."
     }

     jQuery(extender.get_completionList()).prepend("<li rel='header' style='background-color:#ccc !important;'>" + message + "</li>");
}

Answer 2

Ответ Юрия помог мне в его решении, поэтому я отдаю ему должное, хотя для его решения потребовались некоторые изменения.

Прежде всего, событие clientShowing (отображаетсянастройка OnClientShowing = "clientShowing" в элементе управления AutoExtender) выполняется при инициализации.Здесь мы переопределяем метод _setText, чтобы убедиться, что ничего не происходит при нажатии на элемент заголовка.Я использовал основную идею из ответа Юрия, который действительно помог мне.Я только изменил проверку класса 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); 
    }; 
} 

Итак, нам нужно добавить элемент заголовка в начало списка.Это должно быть сделано в событии clientPopulated (отображается путем установки OnClientPopulated = "clientPopulated" в элементе управления AutoExtender).Это событие выполняется каждый раз, когда результаты поиска заканчиваются, поэтому здесь у нас есть правильный счетчик поиска.

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, чтобы убедиться, что он переопределяет стиль mousover, добавленный из элемента управления AutoExtender.

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

Answer 3

Мы можем дать лучший ответ, если вы разместите выходной html вашего элемента управления автозаполнения. Во всяком случае, если это выпадающий контроль;

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