Jquery 自动完成 - 关注整体 table 而不仅仅是 <li>
Jquery Autocomplete - focus on the whole table and not only on the <li>
我遇到了一个问题，即使研究了很多天也无法解决。
我使用 Jquery 的自动完成功能，除焦点外一切正常。当我专注于我的菜单时，整个 table 都是焦点，而不仅仅是 '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/（不用担心 url，这是我的草稿网站）
提前致谢！
考虑以下示例。我在数据中添加了 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>
添加“查看更多”类型的 link 可能需要更多工作。这需要知道类别何时更改或在何处注入 link。可以尝试在添加新类别项之前注入它。也可以在菜单编译后注入。
我遇到了一个问题，即使研究了很多天也无法解决。
我使用 Jquery 的自动完成功能，除焦点外一切正常。当我专注于我的菜单时，整个 table 都是焦点，而不仅仅是 '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/（不用担心 url，这是我的草稿网站）
提前致谢！
考虑以下示例。我在数据中添加了 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>
添加“查看更多”类型的 link 可能需要更多工作。这需要知道类别何时更改或在何处注入 link。可以尝试在添加新类别项之前注入它。也可以在菜单编译后注入。