如何重写jquery自动完成菜单项的功能

Question

我正在寻找覆盖' menufocus ';当箭头键向上或向下时触发的事件。

//providing below extension autocomplete functions
//issue is even the default jquery ui autocomplete menufocus is getting executed 
// before the below menufocus function 
$.widget( "app.autocomplete", $.ui.autocomplete, {
_renderItem: function( ul, item ) {

// Replace the matched text with a custom span. This
// span uses the class found in the "highlightClass" option.
var re = new RegExp( "(" + this.term + ")", "gi" ),
cls = 'ui-autocomplete-term',
template = "<span class='" + cls + "'>$1</span>",
label = item.label.replace( re, template ),
$li = $( "<li/>" ).appendTo( ul );

// Create and return the custom menu item content.
$( "<a/>" ).attr( "href", "#" )
.html( label )
.appendTo( $li );
var hasRcSpan = $(".find-fund-search-btn-rc");
if(typeof(hasRcSpan) != 'undefined' && hasRcSpan != null){
$('#' + uniqueId + '-search-icon').show();
}else{
$('#' + uniqueId + '-search-icon').hide();
}
return $li;
},

_create: function() {
this._super();
this._on( this.menu.element, {
menufocus: function( event, ui ) {
console.log("menu focus called");
var label, item;
item = ui.item.data( "ui-autocomplete-item" );
// Announce the value in the liveRegion
label = ui.item.attr( "aria-label" ) || item.value;
if ( label && String.prototype.trim.call( label ).length ) {
clearTimeout( this.liveRegionTimer );
this.liveRegionTimer = this._delay( function() {
this.liveRegion.html( $( "<div>" ).text( label ) );
}, 100 );
}
},
});
}

});

看到了一些关于自动完成搜索的例子，输入字段聚焦，响应，选择，但没有"菜单聚焦";事件。

这是jquery js https://code.jquery.com/ui/1.13.2/jquery-ui.js，它有"自动完成"小部件js .

谢谢,斯里兰卡

Answer 1

做了一些小改动并测试了代码。

$(function() {
$.widget("custom.myAutocomplete", $.ui.autocomplete, {
_create: function() {
this._super();
console.log(this.menu.element);
this._on(this.menu.element, {
menufocus: function(event, ui) {
console.log("menu focus called");
var label, item;
item = ui.item.data("ui-autocomplete-item");
label = ui.item.attr("aria-label") || item.value;
if (label && String.prototype.trim.call(label).length) {
clearTimeout(this.liveRegionTimer);
this.liveRegionTimer = this._delay(function() {
this.liveRegion.html($("<div>").text(label));
}, 100);
}
},
});
},
_renderItem: function(ul, item) {
var re = new RegExp("(" + this.term + ")", "gi"),
cls = 'ui-autocomplete-term',
template = "<span class='" + cls + "'>$1</span>",
label = item.label.replace(re, template),
$li = $("<li/>").appendTo(ul);
$("<a/>").attr("href", "#")
.html(label)
.appendTo($li);
var hasRcSpan = $(".find-fund-search-btn-rc");
/*
if (typeof(hasRcSpan) != 'undefined' && hasRcSpan != null) {
$('#' + uniqueId + '-search-icon').show();
} else {
$('#' + uniqueId + '-search-icon').hide();
}
*/
return $li;
}
});
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").myAutocomplete({
source: availableTags
});
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/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.2/jquery-ui.js"></script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>

这看起来像你想要的那样工作。