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 );
}; });
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.
Also, updated the textbox width so the text did not jump.
来源:https://stackoverflow.com/questions/8450490/jquery-auto-complete-substitute-for-select-drop-down