AutoCompleteEditor と呼ばれるカスタム SlickGrid エディターを作成して、オートコンプリート コンボボックスに必要な関連フィールドをフックしました。キーボードの上下キーを押してアイテムを上下にスクロールしようとすることを除いて、これまでのところ正常に動作します。このオートコンプリート コンボボックスは SlickGrid に埋め込まれているため、Down キーを押すと、グリッド内の activeCell のすぐ下のセルに移動することが問題だと思います。
私の質問は、SlickGrid に埋め込まれたオートコンプリート コンボボックスで UP/DOWN キーを押して、提案のアイテムを上下にスクロールするにはどうすればよいですか?
注: 左右のキーを無効にして機能させる方法は知っていますが、上下のキーの機能は左右のキーの押下とは異なります。
これは、カスタム エディターのソース コードです。
function AutoCompleteEditor(args) {
var $input;
var defaultValue;
var scope = this;
var calendarOpen = false;
this.init = function () {
$input = $("<INPUT id='tags' class='editor-text' />");
$input.width($(args.container).innerWidth() - 28);
$input.appendTo(args.container);
$input.bind("keydown.nav", function (e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
else if (e.keyCode === $.ui.keyCode.UP || e.keyCode === $.ui.keyCode.DOWN) {
// e.stopImmediatePropagation();
e.stopImmediatePropagation();
}
});
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.appendTo( args.container )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-combobox-toggle" )
.click(function() {
// close if already visible
if ( $input.autocomplete( "widget" ).is( ":visible" ) ) {
$input.autocomplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
$input.autocomplete( "search", "" );
//achieve the positioning in case of scrolling
$(".ui-autocomplete").position({
my: "left top",
at: "left bottom",
of: $("#tags"),
collision: "flip flip"
});
$input.focus().select();
});
$input.focus().select();
$input.autocomplete({
delay: 0,
minLength: 0,
source: args.column.options
});
};
this.destroy = function () {
$input.autocomplete("destroy");
};
this.focus = function () {
$input.focus();
};
this.position = function (position) {
$(".ui-autocomplete").position({
my: "left top",
at: "left bottom",
of: $("#tags"),
collision: "flip flip"
});
};
this.loadValue = function (item) {
defaultValue = item[args.column.field];
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (item, state) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( state ) + "$", "i" ),
valid = false;
jQuery.each(args.column.options , function(index, value){
if ( value.match( matcher ) ) {
valid = true;
item[args.column.field] = state;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
$input.data( "autocomplete" ).term = "";
item[args.column.field]="";
return false;
}
// item[args.column.field] = matcher;
};
this.isValueChanged = function () {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}