0

我想将类别添加到自动完成小部件的搜索结果中，例如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>
4

1 回答 1

0

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

  • 为 rendermenu 内容添加自定义 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);
        }
    });
});
于 2013-04-08T19:22:42.377 回答