Question

I have an AutoCompleteExtender from the Ajax Control Toolkit. I need to have a heading in the dropdown list that shows how many items found, but it should not be selectable as an item.

I have tried this using jQuery, but even when I just add as a div, it is still selected as an item into the text box when I click on it:

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

Add OnClientItemSelected and OnClientShowing events handlers and try script below:

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>");
}

Added:
you even can do this without OnClientItemSelected handler:

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>");
}