Question

我在这个项目上使用jqueryui在按下第一个字母时显示几个自动完成列表。
向上和向下箭头键可用于浏览生成的列表，但我想在jquery生成的focus上触发<li>...</li>事件。
我尝试过hover和mouseenter事件，效果很好。但是，当我尝试使用focus时，它会起作用这是我的代码

JQuery的

$(document).delegate('.ui-menu-item a', 'focus', function( event ){
    alert( event.type );
    var item_name_this = $(this).html();

    /*$.ajax({
        type : 'GET',
        url : 'process.php',
        data : 'item_name_this='+item_name_this,
        cache: false,
        success : function(results){
            $('#div1').html(results);
        }
    });*/

});

HTML

    <table cellpadding="0" cellspacing="1" width="20%" align="center" id="" border="0">
    <tr>
        <td><input type="text" name="itemname" id="itemname" value="" placeholder="Item Name" /></td>
    </tr>
    <tr>
        <td><div class="autocomplete_lists"></div></td>
    </tr>
    <tr>
        <td> 
            <table cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td>
                        <div class="item_info">
                            <table border="0" cellpadding="1" cellspacing="1" align="center" width="100%" height="100%" id="itemproperties">
                                <tr>
                                    <td width="70%">Item Name</td>
                                    <td width="30%"><span id="properties_item_name"></span></td>
                                </tr>
                                <tr>
                                    <td>Item Quantity</td>
                                    <td><span id="properties_item_qty">&nbsp;</span></td>
                                </tr>
                                <tr>
                                    <td>Item Price</td>
                                    <td><span id="properties_item_price">&nbsp;</span></td>
                                </tr>
                                <tr>
                                    <td>Item Warehouse</td>
                                    <td><span id="properties_item_warehosue">&nbsp;</span></td>
                                </tr>                                                                                                
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>        
</table>

忘记包含我的CSS，以防你想在本地试用

.item_info{
    height:250px;
    width:100%;
    border:1px solid #CCC;
}

#itemproperties td{
    border-bottom:1px solid #999;
    border-right:1px solid #999;
}

#itemproperties td span{
    font-weight:bolder;
    font-size:22px;
}

input{
    height:28px;
}

table{
/*  border-collapse:collapse;*/
}

.autocomplete_lists{
    height:250px;
    border:1px solid #CCC;
}
enter code here

Javscript

var tags = [ "A-PLAS 800MG","B-PLAS JR","CICOF SYRUP","DBIDEC (NEW U.K)","EBSORBENT GUAZE","ABYCOLD SYR","ABYCOLD TABS","ABYTAB","BBYVITA CAP","CBYVITA SYRUP","DCCULOL EYE 0.5%","ECIDOM CAP LUEX","ECINIL ''0''SUSPENSION","FCINIL '0'SUSPENSION","ACNEGON GEL","GCRIFLAVINE LOTION","FCTIFAST CAP","FCTIFED EXPECTORANT","HCTIFED SYRUP","HCTIFED TAB", ];
$( "#itemname" ).autocomplete({
    source: function( request, response ) {
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( tags, function( item ){
                return matcher.test( item );
            }) );
        }
});

这是一个与mouseenter事件一起使用的jsfiddle。
请帮助。

Answer 1

jQuery UI AutoComplete拥有自己的焦点事件。

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});

有关您的方案，请参阅updated jsFiddle

JqueryUI autotomplete使用箭头键进行焦点委派

1 个答案: