jQuery UI自動完成自定義標記

Question

我正在使用jQuery UI自動完成與分類的搜索結果，我想用CSS來加強它。

不幸的是，jQuery用戶界面不會讓您可輕鬆默認的標記真的很難一起工作：

<input class="ui-autocomplete-input"/> 
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class='ui-autocomplete-category'>Category 1</li> 
    <li class="ui-menu-item"> 
     <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
     <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
     <a class="ui-corner-all">item 3</a> 
    </li> 
    <li class='ui-autocomplete-category'>Category 2</li> 
    <li class="ui-menu-item"> 
     <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
     <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
     <a class="ui-corner-all">item 3</a> 
    </li>  
</ul> 

，我想標記是這樣的：

<input class="ui-autocomplete-input"/> 
<ul class="ui-autocomplete ui-catcomplete"> 
    <div class="ui-block"> 
     <div class="ui-autocomplete-category">Category 1</div> 
     <div class="ui-list"> 
      <li class="ui-menu-item"> 
       <a class="ui-corner-all">item 1</a> 
      </li> 
      <li class="ui-menu-item"> 
       <a class="ui-corner-all">item 2</a> 
      </li> 
      <li class="ui-menu-item"> 
       <a class="ui-corner-all">item 3</a> 
      </li> 
     </div> 
    </div> 
    <div class="ui-block"> 
     <div class="ui-autocomplete-category">Category 1</div> 
     <div class="ui-list"> 
      <li class="ui-menu-item"> 
       <a class="ui-corner-all">item 1</a> 
      </li> 
      <li class="ui-menu-item"> 
       <a class="ui-corner-all">item 2</a> 
      </li> 
      <li class="ui-menu-item"> 
       <a class="ui-corner-all">item 3</a> 
      </li> 
     </div> 
    </div> 
</ul> 

這就是我達到我的極限的地方。

我實際上設法創建了標記，但我不能再通過單擊該項目來選擇和提交。

這裏是我想出了代碼：

$.widget("custom.catcomplete", $.ui.autocomplete, { 

    _renderMenu: function(ul, items) { 
     var self = this, 
      currentCategory = "", 
      i = 0; 

     $.each(items, function(index, item) { 
      if (item.category != currentCategory) { 

       ul.append("<div class='ui-autocomplete-category'>" + item.category + "</div>"); 
       currentCategory = item.category; 

      } 

      self._renderItem(ul, item); 
     }); 

     /* This is how I thought it would work */ 

     ul.find('.ui-autocomplete-category').each(function() { 
      $(this).nextUntil('div') 
        .andSelf() 
        .wrapAll('<div class="ui-block">') 
        .nextUntil('div') 
        .wrapAll('<div class="ui-list">'); 
     }); 

    }, 

    _renderItem: function(ul, item) { 
     return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + "</a>") 
     .appendTo(ul); 
    }, 
}); 

$(function() { 
    $("#ui-autocomplete-input").catcomplete({ 
     source: '<?php echo SITEURL?>/users/complete/', 
     delay: 0, 
     autoFocus: true, 
     select: function(event, ui) { 
      if(ui.item) 
      { 
       $('#ui-autocomplete-input').attr('value',ui.item.value); 
      } 
      $('#ui-autocomplete-form').submit(); 
     } 
    }); 
}); 

所以基本上，選擇：功能部分沒有在所有的工作。

任何人都可以幫助我嗎？

我確定有一個更簡單的方法來修改默認標記，並使其工作得很好。

這是我希望它看起來像：

Answer 1

我終於找到了自己的解決方案，它涉及一些CSS trickery和一些簡單的jQuery。

CSS：

.ui-autocomplete { 
    width:424px; 
    margin:0; 
    padding:0 0 14px 0; 
} 

.ui-autocomplete-category { 
    width:100px; 
    position: absolute; 
    padding:0 20px; 
    margin:20px 0 0 0; 
} 

.ui-menu-item { 
    padding-left:140px; 
} 

.ui-first { 
    padding-top:20px; 
} 

的jQuery：

$("#search").catcomplete({ 
    delay: 0, 
    source: data, 
    autoFocus: true, 
    select: function(event, ui) { 
     if(ui.item) { $('#search').attr('value',ui.item.value);} 
     $('#form').submit(); 
     }, 

    /* This is the important part! */ 

    open: function() { 
     $('.ui-autocomplete-category').next('.ui-menu-item').addClass('ui-first'); 
    }  
}); 

基本上，我有絕對定位發揮將類別名稱在左邊，我添加了一個類來與jQuery的第一個LI元素爲了與PADDING創建一些間距。

它並不完美，但它完美的作品:)

Answer 2

你可以解決這個問題，而不帶有CSS掛羊頭賣狗肉的一點點改變HTML：

ul.ui-autocomplete { 
    padding-left: 200px; 
} 

    ul.ui-autocomplete li.ui-autocomplete-category { 
     width: 200px; 
     height: 50px; 
     margin-left: -200px; 
     margin-bottom: -50px; 
    } 

它並不完美（類別li的高度可能會超過結果的高度 - 或者它可能不適合li的內容），但它起作用。

btw：ul的唯一有效子元素是li。所以跨度也不會幫助你。