问题
I am using a jQuery Autocomplete widget on a text input to replace a select drop down list. The suggest drop down opens up when a user clicks into the textbox. My solution works great in FireFox but works with a bit of a glitch in Internet Explorer 8. In internet explorer when an item is selected from the suggest drop down the suggest list disappears then re-appears for a brief second. I have no idea how to prevent this.
I am using: (jquery) jquery-1.6.4.min.js (jquery UI) jquery-ui-1.8.16.custom.min.js
Code Below
<input type="text" style="width:200px;" id="txtPosTypeS" value="" />
var RegTempList = [
{ label: "Auxiliary Monthly Trust", value: 1000},
{ label: "Auxiliary Monthly Operating", value: 1001},
{ label: "Auxiliary Hourly Trust", value: 1002},
{ label: "Auxiliary Hourly Operating", value: 1003}]
$().ready(function() {
$('#txtPosTypeS').autocomplete({
minLength: 0,
source: RegTempList,
delay: 0,
focus: function( event, ui ) {
$(this).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$(this).blur();
$(this).val( ui.item.label );
return false;
},
change: function (event, ui) {
//if the value of the textbox does not match a suggestion, clear its value
if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
$(this).val('');
$('#hidPositionType').val('');
}
},
close: function(event, ui) {
$(this).blur();
return false;
}
})
.focus(function(){
$(this).autocomplete('search','');
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
}; });
回答1:
Using IE8 and jsfiddle, there is a script error on the textEquals in the change function. Removing the change function, fixes the issue.
Just threw this into jsFiddle, here is the link.
http://jsfiddle.net/BDd9H/
Also, updated the textbox width so the text did not jump.
来源:https://stackoverflow.com/questions/8450490/jquery-auto-complete-substitute-for-select-drop-down