JqueryAutocomplete-專注于整個表格，而不僅僅是<li>-有解無憂

我遇到了一個我無法解決的問題，即使經過很多天的研究。

我使用 Jquery 的自動完成功能，除了焦點之外一切正常。當我專注于我的選單時，整張桌子都是焦點，而不僅僅是“li”和“li”。代碼片段：

$(document).ready(function() {
  $.ui.autocomplete.prototype._renderMenu = function(ul1, items) {
    var self = this;
    ul1.append("<table class='books'><thead><tr><th class='subtitleSearch'>BOOKS</th></thead><tbody></tbody></table>");
    $.each(items, function(index, item) {
      self._renderItemData(ul1, ul1.find("table.books tbody"), item);
    })
    ul1.append("<p class='seeMore'><a href=''>See more...</a></p>");
    ul1.append("<table class='movies'><thead><tr><th class='subtitleSearch'>MOVIES</th></thead><tbody></tbody></table>");
    $.each(items, function(index, item) {
      self._renderItemData(ul1, ul1.find("table.movies tbody"), item);
    })
    ul1.append("<p class='seeMore'><a href=''>See more...</a></p>");
    ul1.append("<table class='TVShows'><thead><tr><th class='subtitleSearch'>TV SHOWS</th></thead><tbody></tbody></table>");
    $.each(items, function(index, item) {
      self._renderItemData(ul1, ul1.find("table.TVShows tbody"), item);
    })
    ul1.append("<p class='seeMore'><a href=''>See more...</a></p>");
  };
  $.ui.autocomplete.prototype._renderItemData = function(ul, table, item) {
    return this._renderItem(table, item).data("ui-autocomplete-item", item);
  };
  $("#input_search_form").autocomplete({
      source: '/autocomplete.php',
      minLength: 3,
      focus: function(event, ui) {
        //alert("Focus Event Triggered");
      }
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .data("item.autocomplete", item)
        .append("<tr><td rowspan='3' class='thumbTD'><img src='"   item.cover   "' alt='Cover' class='thumb' /></td><td>"   item.label   "</td></tr><tr><td class='subtitle'>"   item.author   "</td></tr><tr><td class='subtitle'>"   item.publishedDate   "</td></tr>")
        .appendTo(ul);
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="viewport">
  <div id="header" class="header">
    <div class="header_top">
    </div>
  </div>
  <div id="container">
    <div class="container_search">
      <div class="search">
        <div class="search_box">
          <span class="material-icons md-36">search</span>
          <form id="search_form" class="search_form" action="autocomplete.php" method="post">
            <input id="input_search_form" placeholder="Type your search here...">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

演示：http ://www.thebitcoinstreet.com/ （不要擔心網址，這是我的草稿網站）

先感謝您！

uj5u.com熱心網友回復：

考慮以下示例。我category在資料中添加了部分。

$(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'>"   item.category   "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category   " : "   item.label);
        }
      });
    }
  });

  var example = [{
    "label": "Revue des arts d\u00e9coratifs",
    "category": "Books",
    "author": "",
    "cover": "http:\/\/books.google.com\/books\/content?id=8aZaAAAAYAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
    "publishedDate": "1890"
  }, {
    "label": "Pie VI et le Directorie",
    "category": "Books",
    "author": "L\u00e9on S\u00e9ch\u00e9",
    "cover": "http:\/\/books.google.com\/books\/content?id=BXErAQAAMAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
    "publishedDate": "1894"
  }, {
    "label": "Index of Federal Specifications, Standards and Commercial Item Descriptions",
    "category": "Books",
    "author": "",
    "cover": "http:\/\/books.google.com\/books\/content?id=LbFPAAAAMAAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
    "publishedDate": ""
  }, {
    "label": "Recueil g\u00e9n\u00e9ral des lois et des arr\u00eats",
    "author": "",
    "category": "Books",
    "cover": "http:\/\/books.google.com\/books\/content?id=RyFRAQAAIAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
    "publishedDate": "1933"
  }];

  $(function() {
    $("#input_search_form").catcomplete({
      source: example,
      minLength: 3
    }).catcomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .data("item.autocomplete", item)
        .append("<div><span class='thumbTD'><img src='"   item.cover   "' alt='Cover' class='thumb' /></span>"   item.label   "<br /><span class='subtitle'>"   item.author   "</span><br /><span class='subtitle'>"   item.publishedDate   "</span></div>")
        .appendTo(ul);
    };;
  });
});

.ui-autocomplete-category {
  font-weight: bold;
}

.ui-autocomplete .ui-menu-item .thumbTD {
  float: left;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<div class="viewport">
  <div id="header" class="header">
    <div class="header_top">
    </div>
  </div>
  <div id="container">
    <div class="container_search">
      <div class="search">
        <div class="search_box">
          <span class="material-icons md-36">Search</span>
          <form id="search_form" class="search_form" action="autocomplete.php" method="post">
            <input id="input_search_form" placeholder="Type your search here...">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

這將創建沒有表格的串列。

如果你真的想使用表格，試試這個。

$(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'>"   item.category   "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category   " : "   item.label);
        }
      });
    }
  });

  var example = [{
    "label": "Revue des arts d\u00e9coratifs",
    "category": "Books",
    "author": "",
    "cover": "http:\/\/books.google.com\/books\/content?id=8aZaAAAAYAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
    "publishedDate": "1890"
  }, {
    "label": "Pie VI et le Directorie",
    "category": "Books",
    "author": "L\u00e9on S\u00e9ch\u00e9",
    "cover": "http:\/\/books.google.com\/books\/content?id=BXErAQAAMAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
    "publishedDate": "1894"
  }, {
    "label": "Index of Federal Specifications, Standards and Commercial Item Descriptions",
    "category": "Books",
    "author": "",
    "cover": "http:\/\/books.google.com\/books\/content?id=LbFPAAAAMAAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
    "publishedDate": ""
  }, {
    "label": "Recueil g\u00e9n\u00e9ral des lois et des arr\u00eats",
    "author": "",
    "category": "Books",
    "cover": "http:\/\/books.google.com\/books\/content?id=RyFRAQAAIAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
    "publishedDate": "1933"
  }];

  $(function() {
    $("#input_search_form").catcomplete({
      source: example,
      minLength: 3
    }).catcomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .data("item.autocomplete", item)
        .append("<div><table><tr><td rowspan='3' class='thumbTD'><img src='"   item.cover   "' alt='Cover' class='thumb' /></td><td>"   item.label   "</td></tr><tr><td class='subtitle'>"   item.author   "</td></tr><tr><td class='subtitle'>"   item.publishedDate   "</td></tr></table></div>")
        .appendTo(ul);
    };;
  });
});

.ui-autocomplete-category {
  font-weight: bold;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<div class="viewport">
  <div id="header" class="header">
    <div class="header_top">
    </div>
  </div>
  <div id="container">
    <div class="container_search">
      <div class="search">
        <div class="search_box">
          <span class="material-icons md-36">Search</span>
          <form id="search_form" class="search_form" action="autocomplete.php" method="post">
            <input id="input_search_form" placeholder="Type your search here...">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

添加“查看更多”型別的鏈接可能需要更多的作業。這需要知道類別何時發生變化或在何處注入該鏈接。可以嘗試在添加新類別項之前注入它。也可以在選單編譯后注入。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/444871.html

標籤：jQuery jQuery-ui 自动完成

上一篇：使用小數位的整數條件格式

下一篇：內網資訊收集教程