jQuery UI自动完成自定义标记

我正在使用带有分类搜索结果的jQueryUIAutoComplete，我想用CSS来增加它的趣味性

不幸的是，jQuery UI并没有让它变得简单，而且默认标记很难使用：

<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>

类别1

项目1


项目2


项目3

类别2

项目1


项目2


项目3

我想要的标记是：

<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>

第一类

项目1


项目2


项目3

第一类

项目1


项目2


项目3

这就是我达到极限的地方

实际上，我成功地创建了标记，但我无法再通过单击该项目来选择和提交

下面是我想出的代码：

$.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();
        }
    });
});

$.widget（“custom.catcomplete”，$.ui.autocomplete{
_renderMenu：功能（ul，项目）{
var self=这个，
currentCategory=“”，
i=0；
$。每个（项目、功能（索引、项目）{
如果（item.category！=当前类别）{
ul.追加（“+item.category+”）；
currentCategory=item.category；
}
自我评估（ul，项目）；
});
/*这就是我认为它会起作用的方式*/
ul.find（'.ui自动完成类别'）。每个（函数（）{
$（this.nextUntil（'div'））
.andSelf（）
.wrapAll（“”）
.nextUntil（'div'））
.wrapAll（“”）；
});
},
_renderItem：功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录（ul）；
},
});
$（函数（）{
$（“#ui自动完成输入”）.catcomplete({
来源：“/users/complete/”，
延迟：0，
自动对焦：对，
选择：功能（事件、用户界面）{
if（ui.item）
{
$（'ui autocomplete input'）.attr（'value'，ui.item.value）；
}
$（“#ui自动完成表单”）.submit（）；
}
});
});

因此，基本上，select:function部分根本不起作用

有人能帮我吗

我相信有一种更简单的方法可以修改默认标记并使其正常工作

这就是我希望它看起来的样子：

---

您可以在不改变HTML的情况下通过一点CSS技巧来解决这个问题：

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的内容），但它是有效的

---

顺便说一句：ul的唯一有效子元素是li。所以span也帮不了你。

我最终自己找到了解决方案，其中包括一些CSS技巧和一些简单的jQuery

CSS:

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元素添加一个类，以便使用填充创建一些间距

---

它不是完美的，但工作完美：）

A

div

不是无序列表的有效子元素，因此您已经在询问渲染问题。你能描述一下你设计这些元素的意图吗？不管怎样，我可以使用一个图标并将其显示为一个块，它不会改变任何风格。我想把分类放在左边，把项目放在右边，这样就节省了一些空间你对无序列表的看法是绝对正确的，我不知道我在想什么，也许我真的不在乎把跨度和div放在我想要的地方。总之，那天晚些时候我找到了另一个解决方案，它和你的类似，因为它不改变标记，并且使用了一些CSS技巧。祝贺你找到了这个解决方案。如果可以，请单击左侧的复选标记，将您的答案标记为“已接受”。这将让其他人从你的成功中学习。干杯~我遵循了你提到的完全相同的解决方案，但它对我根本不起作用。特别是，将div包装在li周围的代码。

$( "#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');
    }    
});