时间戳

首页 > 解决方案 > 从局部视图加载的 jQuery 自动完成结果

jquery - 从局部视图加载的 jQuery 自动完成结果

问题描述

我已经搜索过，不幸的是没有找到答案。抱歉，如果这是重复的。可以从部分加载自动完成的结果吗？

        $('#searchBox2').catcomplete({
            delay: 0,
            minLength: 1,
            source: '/api/CheckOrders/Search?searchString=' + inputData,
            select: function (event, ui) {

            }
        }).bind('focus', function () {
            $(this).keydown();
        });
    }

我已经在类别等中正确显示了结果，但是我想要的样式被 UI 样式覆盖并且变得有点混乱。我想知道是否可以从部分加载结果，因为这可以让我更轻松地设置结果的样式。下面显示的是当前结果的显示方式，但 UI 样式会接管。

    function LoadAutoComplete(inputData) {
        $.widget("custom.catcomplete", $.ui.autocomplete, {
            _create: function () {
                this._super();
                this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
            },
            _renderMenu: function (ul, items) {

                var that = this,
                    currentCategory = "";

                $.each(items, function (index, item) {
                    var li;
                    if (item.category != currentCategory) {
                        ul.append("<div class='aa-suggestions-category' style='margin-top: 10px;padding-left: 5px;'>" + item.category);
                        currentCategory = item.category;
                    }

                    li = that._renderItemData(ul, item);

                    if (item.category) {
                        li.attr("aria-label", item.category + " : " + item.label);
                    }
                });
            },
            _renderItem: function (ul, item) {
                if (item.category === "Cancelled") {
                    return $("</div><span class='aa-suggestions' style='display: block;'><div class='aa-suggestion'>")
                        .append("<span>" +
                            item.customerID + "</span><span>" +
                            item.customerName + "</span><span>" +
                        item.email + "</span></div></div>")
                        .appendTo(ul);
                }

                else {
                   
                }
            }
        });

标签： jqueryjquery-uijquery-ui-autocomplete

解决方案

没有合适的例子，我使用了演示：https ://jqueryui.com/autocomplete/#categories

考虑以下。

$(function() {
  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category aa-suggestions-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    },
    _renderItem: function(ul, item) {
      return $("<li>")
        .attr("data-value", item.value)
        .append("<div class='aa-suggestion'><span>" +
          item.customerID + "</span><span>" +
          item.customerName + "</span><span>" +
          item.email + "</span></div>")
        .addClass("aa-suggestions")
        .appendTo(ul);
    }
  });

  var data = [{
      label: "anders",
      category: "",
      customerID: "01",
      customerName: "anders",
      email: "asmith@example.com"
    },
    {
      label: "andreas",
      category: "",
      customerID: "02",
      customerName: "andreas",
      email: "andreas@example.com"
    },
    {
      label: "antal",
      category: "",
      customerID: "03",
      customerName: "antal",
      email: "antal@example.com"
    },
    {
      label: "annhhx10",
      category: "Products",
      customerID: "04",
      customerName: "ann h",
      email: "annh@example.com"
    },
    {
      label: "annk K12",
      category: "Products",
      customerID: "05",
      customerName: "ann k",
      email: "annk@example.com"
    },
    {
      label: "annttop C13",
      category: "Products",
      customerID: "06",
      customerName: "ann top",
      email: "annt@example.com"
    },
    {
      label: "anders andersson",
      category: "People",
      customerID: "07",
      customerName: "anders anderson",
      email: "aanderson@example.com"
    },
    {
      label: "andreas andersson",
      category: "People",
      customerID: "08",
      customerName: "andreas andersson",
      email: "aandersson@example.com"
    },
    {
      label: "andreas johnson",
      category: "People",
      customerID: "09",
      customerName: "andreas johnson",
      email: "ajohnson@example.com"
    }
  ];

  $("#search").catcomplete({
    delay: 0,
    source: data
  });
});
.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

.aa-suggestion span {
  padding-right: 7px;
}

.aa-suggestion span:nth-child(2) {
  width: 90px;
  display: inline-block;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label for="search">Search: </label><input id="search">

这将继续使用ul和li菜单。如果您使用替代项目，请使用适当的示例更新您的帖子。这为各种元素包装并分配了您想要的类。

推荐阅读