JQuery Auto Complete替代Select Drop Down [英] JQuery Auto Complete substitute for Select Drop Down

问题描述

我在文本输入上使用jQuery Autocomplete小部件来替换选择下拉列表.当用户单击文本框时，建议下拉列表将打开.我的解决方案在FireFox中效果很好，但在Internet Explorer 8中却出现了一些故障.在Internet Explorer中，当从建议下拉列表中选择一个项目时，建议列表消失，然后再次出现一秒钟.我不知道如何防止这种情况.

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.

我正在使用: (jquery)jquery-1.6.4.min.js (jquery UI)jquery-ui-1.8.16.custom.min.js

I am using: (jquery) jquery-1.6.4.min.js (jquery UI) jquery-ui-1.8.16.custom.min.js

下面的代码

<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 );
    }; });

推荐答案

使用IE8和jsfiddle，更改功能中的textEquals上存在脚本错误.删除更改功能即可解决问题.

Using IE8 and jsfiddle, there is a script error on the textEquals in the change function. Removing the change function, fixes the issue.

只需将其放入jsFiddle中，这是链接.

Just threw this into jsFiddle, here is the link.

http://jsfiddle.net/BDd9H/

此外，更新了文本框的宽度，以使文本不会跳转.

Also, updated the textbox width so the text did not jump.

这篇关于JQuery Auto Complete替代Select Drop Down的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！