Question

我想在自动填充小部件的搜索结果中添加类别http://jqueryui.com/autocomplete/#categories，但我无法弄清楚如何将代码集成到下面的工作代码中。

    <script> 
        $(function() {
            function split( val ) {
              return val.split( /,\s*/ );
            }
            function extractLast( term ) {
              return split( term ).pop();
            }

            $( "#search" )
              // don't navigate away from the field on tab when selecting an item
              .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "ui-autocomplete" ).menu.active ) {
                  event.preventDefault();
                }
              })
              .autocomplete({
                source: function( request, response ) {
                    console.log(request);
                    console.log(response);
                    console.log(extractLast(request.term));
                  $.getJSON( "http://192.168.33.10/app_dev.php/search/query/" + extractLast( request.term ), {
                    term: extractLast( request.term )
                  }, response );
                },
                search: function() {
                  // custom minLength
                  var term = extractLast( this.value );
                  if ( term.length < 2 ) {
                    return false;
                  }
                },
                focus: function() {
                  // prevent value inserted on focus
                  return false;
                },
                select: function( event, ui ) {
                    window.location = ("http://192.168.33.10/" + ui.item.link);
                }
              });
        });
    </script>

    <div class="ui-widget">
        <label for="search">Search</label>
        <input type="text" id="search" />
    </div>

Answer 1

假设您在json中返回item.category，那么我认为这应该让您非常接近您想要的位置。 - 从示例中获取css或创建自己的css。

为渲染菜单添加自定义catcomplete
使用该代替自动填充

代码：

$(function () {
    $.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this,
                currentCategory = "";
            $.each(items, function (index, item) {
                if (item.category != currentCategory) {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }
                that._renderItemData(ul, item);
            });
        }
    });

    function split(val) {
        return val.split(/,\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }

    $("#search")
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
            event.preventDefault();
        }
    })
        .catcomplete({
        source: function (request, response) {
            console.log(request);
            console.log(response);
            console.log(extractLast(request.term));
            $.getJSON("http://192.168.33.10/app_dev.php/search/query/" + extractLast(request.term), {
                term: extractLast(request.term)
            }, response);
        },
        search: function () {
            // custom minLength
            var term = extractLast(this.value);
            if (term.length < 2) {
                return false;
            }
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            window.location = ("http://192.168.33.10/" + ui.item.link);
        }
    });
});

具有自动完成Jquery UI集成的类别

1 个答案: