3

最初の文字が押されたときに jqueryui を使用していくつかのオートコンプリート リストを表示するこのプロジェクトにいます。
上下の矢印キーを使用して、生成されたリストをナビゲートできますが、jquery によって生成されたリストでfocusイベントを発生させたいと考えています。イベントとイベントを試してみましたが、うまく機能します。しかし、私が試してみると、うまくいきませんこれ が私のコードです<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 );
            }) );
        }
});


これは、イベントで動作 するjsfiddlemouseenterです。
助けてください。

4

1 に答える 1

1

jQuery UI AutoComplete には、独自の focus イベントがあります。

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

シナリオの更新された jsFiddleを参照してください

于 2013-05-17T09:56:33.617 に答える