我在 jQueryUI 中使用自動完成小部件，現在我嘗試對其進行一些自定義。
我想以自定義方式突出顯示自動完成串列中懸停的專案。在下面的示例代碼中，我通過使用focus事件將字體更改為粗體并查找所選元素，最后修改該元素的樣式。
在將懸停的專案更改為粗體之前，我確保將所有其他專案重置為正常字體（否則當懸停在下一個專案上時，之前的專案將保持粗體）。
它部分有效，但我不喜歡我的解決方案（我覺得它有點“丑陋”）。一個問題是，如果我將滑鼠指標移到串列外，它不會檢測到它，最后一項將保持粗體。見圖片：
我被困在這里...如何以更好的方式檢測模糊事件并從最后一個懸停專案中洗掉粗體？這是我的示例代碼：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/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.0/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ", "Clojure", "COBOL", "ColdFusion",
"Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
"Ruby", "Scala", "Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags,
focus: function( event, ui ) {
// Reset all list item fonts
$(".ui-menu-item-wrapper").css("font-weight", "normal");
// Find the element selected and make it bold
selector = ".ui-menu-item-wrapper:contains(" ui.item.label ")";
$(selector).css("font-weight", "bold");
},
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>uj5u.com熱心網友回復：
考慮以下 CSS 示例。
$(function() {
var availableTags = [
"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ", "Clojure", "COBOL", "ColdFusion",
"Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
"Ruby", "Scala", "Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
});.ui-autocomplete .ui-menu-item .ui-state-active {
font-weight: bold;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/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.0/jquery-ui.js"></script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>Autocomplete 使用 Menu 和 Menuui-state-active用于專案。使用正確的 CSS 選擇器，您可以將突出顯示的專案設為粗體。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/368116.html