jQuery在slickGrid中自动完成建议的宽度
我有一个编辑器,在slickGrid中有一个自动完成文本字段。 这看起来像这样:jQuery在slickGrid中自动完成建议的宽度,jquery,jquery-ui-autocomplete,slickgrid,Jquery,Jquery Ui Autocomplete,Slickgrid,我有一个编辑器,在slickGrid中有一个自动完成文本字段。 这看起来像这样: function AutoCompleteEditor(args) { var $input; this.init = function () { $input = $("<INPUT id='tags' class='editor-text' />"); $input.appendTo(args.container); $input.bind("keydown.nav",
function AutoCompleteEditor(args) {
var $input;
this.init = function () {
$input = $("<INPUT id='tags' class='editor-text' />");
$input.appendTo(args.container);
$input.bind("keydown.nav", function (e) {
if (e.which === $.ui.keyCode.LEFT || e.which === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
if((e.which === $.ui.keyCode.DOWN) || (e.which === $.ui.keyCode.UP)){
e.stopImmediatePropagation();
}
if(e.which === $.ui.keyCode.RETURN){
e.stopImmediatePropagation();
}
})
$input.focus().select();
$input.autocomplete({
minLength: 2,
autoFocus: true,
source: function(request, response) {
.....
},
focus: function( event, ui ) {
return false;
},
select: function( event, ui ) {
event.target.value = ui.item.label;
return false;
},
open: function( event, ui ) {
$(this).autocomplete( "widget" )
.find( "ui-menu-item-alternate" )
.removeClass( "ui-menu-item-alternate" )
.end()
.find( "li.ui-menu-item:odd a" )
.addClass( "ui-menu-item-alternate" );
},
appendTo: args.container,
width: 500,
});
};
现在,我有两个问题:
1建议列表仅比编辑器字段窄一点。但我希望它更宽——可能和里面最宽的一样宽
2我已禁用输入字段的向上和向下箭头键,但它不会聚焦列表,以便箭头选择建议项
你知道我的代码出了什么问题吗
感谢您为回答第一个问题提供的帮助 您可以更改自动完成类的css
<style type="text/css">
.ui-autocomplete {
max-height: 250px;
max-width: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete
{
height: 250px;
width: 200px;
}
对不起,我无法复制你在这里做的事情。显然,您正在从菜单中捕捉到该键。但我认为我的注意力停留在编辑字段上,这是正确的,因为我可能想再键入一次左右。我需要捕捉编辑框中的向上和向下箭头键,然后选择下一个或上一个建议。对于该操作,我找不到函数
//Please find below code make it up and down event null
$.widget( "ui.autocomplete", {
options: {
appendTo: "body",
autoFocus: false,
delay: 300,
minLength: 1,
position: {
my: "left top",
at: "left bottom",
collision: "none"
},
source: null
},
pending: 0,
_create: function() {
var self = this,
doc = this.element[ 0 ].ownerDocument,
suppressKeyPress;
this.isMultiLine = this.element.is( "textarea" );
this.element
.addClass( "ui-autocomplete-input" )
.attr( "autocomplete", "off" )
// TODO verify these actually work as intended
.attr({
role: "textbox",
"aria-autocomplete": "list",
"aria-haspopup": "true"
})
.bind( "keydown.autocomplete", function( event ) {
if ( self.options.disabled || self.element.propAttr( "readOnly" ) ) {
return;
}
suppressKeyPress = false;
var keyCode = $.ui.keyCode;
switch( event.keyCode ) {
case keyCode.PAGE_UP:
//self._move( "previousPage", event );
break;
case keyCode.PAGE_DOWN:
//self._move( "nextPage", event );
break;
case keyCode.UP:
//self._keyEvent( "previous", event );
break;
case keyCode.DOWN:
//self._keyEvent( "next", event );
break;
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
// when menu is open and has focus
if ( self.menu.active ) {
// #6055 - Opera still allows the keypress to occur
// which causes forms to submit
suppressKeyPress = true;
event.preventDefault();
}
//passthrough - ENTER and TAB both select the current element
case keyCode.TAB:
if ( !self.menu.active ) {
return;
}
self.menu.select( event );
break;
case keyCode.ESCAPE:
self.element.val( self.term );
self.close( event );
break;
// changes done by justin close the menu if text is empty
case keyCode.BACKSPACE:
break;
//****************end *******************
default:
// keypress is triggered before the input value is changed
clearTimeout( self.searching );
self.searching = setTimeout(function() {
// only search if the value has changed
//if ( self.term != self.element.val() ) {
self.selectedItem = null;
self.search( null, event );
//}
}, self.options.delay );
break;
}
})