我有一個窗體使用jqTransform來替換標準的選擇框和單選按鈕。這一切工作正常和丹迪,除了一件事情讓我很懊惱:jqTransform選擇 - 滾動到字母輸入
由於它將選擇框替換爲鏈接列表,當您鍵入一個字母滾動它不會做任何事情。例如,你點擊打開select,然後輸入S.它應該滾動到列表中的第一個S,但沒有任何反應。有沒有辦法重新設置這個功能?以下是選擇框的jqTransform代碼。我沒有看到一個處理程序這種類型的事情:
/***************************
Select
***************************/
$.fn.jqTransSelect = function(){
return this.each(function(index){
var $select = $(this);
if($select.hasClass('jqTransformHidden')) {return;}
if($select.attr('multiple')) {return;}
var oLabel = jqTransformGetLabel($select);
/* First thing we do is Wrap it */
var $wrapper = $select
.addClass('jqTransformHidden')
.wrap('<div class="jqTransformSelectWrapper"></div>')
.parent()
.css({zIndex: 10-index})
;
/* Now add the html for the select */
$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
/* Now we add the options */
$('option', this).each(function(i){
var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>');
$ul.append(oLi);
});
/* Add click handler to the a */
$ul.find('a').click(function(){
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the default */
$('a:eq('+ this.selectedIndex +')', $ul).click();
$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
this.oLabel = oLabel;
/* Apply the click handler to the Open */
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.click(function(){
//Check if box is already open to still allow toggle, but close all other selects
if($ul.css('display') == 'none') {jqTransformHideSelect();}
if($select.attr('disabled')){return false;}
$ul.slideToggle('fast', function(){
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({scrollTop: offSet});
});
return false;
})
;
// Set the new width
var iSelectWidth = $select.outerWidth();
var oSpan = $('span:first',$wrapper);
var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
$wrapper.css('width',newWidth);
$ul.css('width',newWidth-2);
oSpan.css({width:iSelectWidth});
$ul.css({height:'420px','overflow':'hidden'});
// Calculate the height if necessary, less elements that the default height
//show the ul to calculate the block, if ul is not displayed li height value is 0
$ul.css({display:'block',visibility:'hidden'});
var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
(iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
$ul.css({display:'none',visibility:'visible'});
});
};
下面是我們試圖做來實現這個:
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.keypress(function (e) {
$.each(myArray, function (i, l) {
var sc = l.substr(0, 1).toLowerCase();
var kc = String.fromCharCode(e.which);
if (sc == kc) {
$select[0].selectedIndex = i;
$('span:eq(0)', $wrapper).html(l);
$ul.hide();
return false;
}
});
});
與HTML的樣品沿jqTransform初始化是得心應手。猜測,我會說你的事件處理程序正在丟失;在這種情況下,將祖先元素委派爲偵聽器將解決此問題。但是,如果沒有示例或查看jqTransform,我不知道這是否屬於jqTransform中自己的代碼或功能。 – 2011-12-14 17:11:16
我添加了原始問題的選擇框的jqTransform代碼。我的HTML是如此簡單,標準的。jqTransform實際上取代了選擇框 – user1098316 2011-12-14 17:19:01
我猜我只需要添加一個按鍵事件到select將搜索列表並改變了索引,但我是jQuery的絕對新手,不知道該怎麼做:) – user1098316 2011-12-14 17:31:30