Как добавить заголовок в автозаполнение jQuery UI

Question

Мне нужно добавить заголовок в мою функцию автозаполнения. В этом автозаполнении я использую веб-метод для извлечения данных из базы данных, и я использую jquery-ui-1.8.16. ниже вы можете увидеть моего автозаполнение функции

$("#sub_Header_PropertyTab1_ucPropertyTabs_AddressTab2_txtPropertyKommunenr").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: './webservices/lookup.asmx/GetKommuneAutocom', 
       data: "{ 'prefixText': '" + request.term + "'}", 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function (data) { 
        response($.map(data.d, function (item) { 
         return { 
          label: item.split('^')[1] + "-" + item.split('^')[0], 

          val: item.split('^')[2] 
         } 
        })) 
       }, 
       error: function (response) { 
        alert(response.responseText); 
       }, 
       failure: function (response) { 
        alert(response.responseText); 
       } 
      }); 
     }, 
     select: function (e, i) { 
      //   alert(i.item.label); 
      $("#sub_Header_PropertyTab1_ucPropertyTabs_AddressTab2_txtPropertyKommunenr").val(i.item.val); 
      //$("#").val(i.item.val); 
      return false; 
     }, 
     focus: function (e, i) { 
      $("#sub_Header_PropertyTab1_ucPropertyTabs_AddressTab2_txtPropertyKommunenr").val(i.item.val); 
      return false; 
     }, 

     minLength: 1 
    }); 

Answer 1

Вы можете расширить виджет автозаполнение плагина, и добавить пользовательский заголовок в список автозаполнения переопределения _ renderMenu функции.

кода (с локальными данными):

$(function() { 
    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme"]; 

    $.widget("custom.autocompleteheader", $.ui.autocomplete, { 
     _renderMenu: function (ul, items) { 
      var self = this; 
      $.each(items, function (index, item) { 
       self._renderItem(ul, item); 
       if (index == 0) ul.prepend('<li class="header-auto"> Header for autocomplete!!</li>'); 
      }); 
     } 
    }); 

    $("#tags").autocompleteheader({ 
     source: availableTags 
    }); 

}); 

Ref: http://api.jqueryui.com/jQuery.widget/

Демо: http://jsfiddle.net/IrvinDominin/rMkER/

Answer 2

Это работает для меня. Я просто добавил элемент заголовка в список, используя префикс в открывшемся событии автозаполнения.

open: function() 
    { 
    $('ul.ui-autocomplete').prepend('<li><div class="list-header">HEADER</div></li>'); 
    }