3

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



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


Javascript

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


这是一个适用于该事件的jsfiddle 。请帮忙。mouseenter

4

1 回答 1

1

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

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

请参阅针对您的方案的更新的 jsFiddle

于 2013-05-17T09:56:33.617 回答