I run into a problem with jQuery UI - Autoplete and IE8.
I'm using bobox method which you can find on jQuery UI website - here
Basically, it is creating autoplete input + select menu from select/option list.
I'm using jQuery 1.6.4 and jQuery UI 1.8.16; both from google server.
It is working perfectly on Chrome / FF / Opera, but does not work on IE8.
On IE8 - once you select something (after typing), or use dropdown button IE will reload the page. Please not that IE will not crash till you use arrows or try to select something.
res://ieframe.dll/acr_error.htm#,in the URL, in front of the actual path- or a message
this tab has been reloaded; a problem with the page causes IE to close and reopen the page
Live example here
Any idea what is causing IE to act like that? Any suggestion much appreciated.
jQuery code:
<script>
(function( $ ) {
$.widget( "uibobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input>" )
.insertAfter( select )
.val( value )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autoplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
text: false
})
.removeClass( "ui-corner-all" )
.click(function() {
// close if already visible
if ( input.autoplete( "widget" ).is( ":visible" ) ) {
input.autoplete( "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.autoplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$(document).ready( function() {
$("#bobox")bobox();
});
</script>
I run into a problem with jQuery UI - Autoplete and IE8.
I'm using bobox method which you can find on jQuery UI website - here
Basically, it is creating autoplete input + select menu from select/option list.
I'm using jQuery 1.6.4 and jQuery UI 1.8.16; both from google server.
It is working perfectly on Chrome / FF / Opera, but does not work on IE8.
On IE8 - once you select something (after typing), or use dropdown button IE will reload the page. Please not that IE will not crash till you use arrows or try to select something.
res://ieframe.dll/acr_error.htm#,in the URL, in front of the actual path- or a message
this tab has been reloaded; a problem with the page causes IE to close and reopen the page
Live example here
Any idea what is causing IE to act like that? Any suggestion much appreciated.
jQuery code:
<script>
(function( $ ) {
$.widget( "ui.bobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input>" )
.insertAfter( select )
.val( value )
.autoplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autoplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autoplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autoplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autoplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autoplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autoplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
text: false
})
.removeClass( "ui-corner-all" )
.click(function() {
// close if already visible
if ( input.autoplete( "widget" ).is( ":visible" ) ) {
input.autoplete( "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.autoplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
$(document).ready( function() {
$("#bobox").bobox();
});
</script>
3 Answers
Reset to default 3 +100I'm still trying to work out why IE8 is crashing but it does work for me when you add a jQueryUI theme to the page, for example:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css">
Edit: I think I know which line it is crashing on, but I still do not know why! In the jQueryUI code activate: function( event, item ) {
is the following code which adds style and an attribute to the active item.
this.active = item.eq(0)
.children("a")
.addClass("ui-state-hover")
.attr("id", "ui-active-menuitem")
.end();
For some reason, IE8 crashes here, although for me sometimes does not crash when I remove the .addClass and .attr lines.
Edit 2: OK, for some reason IE is crashing with your .ui-autoplete style. If you change overflow:scroll; to overflow:auto; then IE8 does not crash. Alternatively change max-height to just height, which also fixes it. Guess it's a bug in IE either with max-height (maybe IE8 overflow:auto with max-height) or overflow.
From the first glance this line look strange to me:
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
But its working fine for me in ie8, in ie7 its not working at all. Try if(){return{...}}.
quick look finds your script tag is missing required type attribute
<script type="text/javascript">
I reproduced the issue, copied the file local with no CSS and no fails.
Odd, IF on the original page, I disable CSS using the IE developer tools, it does not crash.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744778193a4593170.html
评论列表（0条）