1

jquery のオートコンプリート ウィジェットを使用しており、Enter キーを次の 2 つの目的に使用したいと考えています。

  1. フォーカスが検索ボックスにあるときにユーザーが Enter キーを押すと、(現在の一致に関係なく) フォームを開く必要があります。
  2. システムが一致を見つけ、ユーザーがEnter キーを押してリストから選択すると、別のダイアログが表示されます。

問題は、一致するオートコンプリート リストからオプションを選択すると、テキスト ボックスがフォーカスを保持しているように見えるため、イベントを区別できなかったことです。

これは私が今いるところです：

私のオートコンプリート機能:

jQuery('#nom_id_busqueda').autocomplete({
    source: function(request, response) {
        jQuery.ajax({
            url: myUrl,
            dataType: "json", 
            data: {term: encodeURI(request.term)},
            success: function (answer) {
               if (answer.length == 0) {
                  jQuery("#encontrada").hide();
                  jQuery("#no_encontrada").show();
               }
               else {
                  jQuery("#no_encontrada").hide();
                  response(answer);
               }
            },
            error : function(){ alert("Something went wrong."); },
        });
    },
    minLength:2,
    delay:400,
    select: function(event, ui) {
        if (ui.item){
            jQuery("#nom_id_busqueda").val(ui.item.label);
            jQuery("#per_busq").val(ui.item.value);
            event.preventDefault();
            jQuery("#encontrada").show();
        }
    },
});

キーストロークのイベントリスナー：

jQuery('#nom_id_busqueda').keydown(function (e){
    if(e.keyCode == 13){
        if(jQuery("#nom_id_busqueda").is(":focus")) {
            jQuery("#no_encontrada").hide();
            jQuery("#encontrada").hide();
            jQuery("#div_formu_busq").dialog("close");
            jQuery("#div_formu_per").dialog("open");
        }
    }
});

何か案は？ありがとう。

更新:これが私のDOMです:

<div id="div_formu_busq" class="formu_fs" title="<?php echo JText::_('COM_BUSQUEDA_PERSONA');?>">
<form name="formu_busq" onsubmit="return false;">
    <fieldset>
        <legend><?php echo JText::_('COM_BUSCAR_EN_EXISTENTES');?></legend>
        <?php echo JText::_("COM_ESCRIBA_EL_NOMBRE_O_EL_NUMERO_DE_IDENTIFICACION_PARA_BUSCAR_EN_EL_SISTEMA").' '. JText::_("COM_ENTER_LO_LLEVA_AL_FORMULARIO") ;?><br>
        <ul>
        <li>
            <label for=nom_id_busqueda><?php echo JText::_("COM_NOMBRE_O_NUMERO_DE_DOCUMENTO");?></label>
            <input type="text" name="nom_id_busqueda" id="nom_id_busqueda" />
        </li>
    </ul>
    <input type="hidden" name="per_busq" id="per_busq" />
</form>
<br>
<div id="encontrada" class="buts">
    <fieldset>
        <p><?php echo JText::_("COM_SE_ENCONTRO_UNA_PERSONA_CON_EL_MISMO_NOMBRE_Y_O_IDENTIFICACION");?> <a class="button_fs_a blue_b" onclick="irAPersona()" ><?php echo JText::_('COM_IR_A_PERSONA'); ?></a></p>
    </fieldset>
</div>

<div id="no_encontrada" class="buts">
    <fieldset> 
        <p>
            <?php echo JText::_("COM_NO_SE_ENCONTRARON_RESULTADOS_SIMILARES");?>
            <a class="button_fs_a blue_b" id="m_formu_per" ><?php echo JText::_('COM_AGREGAR_USUARIO'); ?></a>
        </p>
    </fieldset> 
</div>

4

1 に答える 1

4

よし、道を見つけた！イベント リスナーに!jQuery(this).data( "ui-autocomplete" ).menu.active条件を追加したので、キーストローク リスナーは次のようになります。

jQuery('#nom_id_busqueda').keydown(function (e){
    if(e.keyCode == 13 && !jQuery( this ).data( "ui-autocomplete" ).menu.active){
        if(jQuery("#nom_id_busqueda").is(":focus")) {
            jQuery("#no_encontrada").hide();
            jQuery("#encontrada").hide();
            jQuery("#div_formu_busq").dialog("close");
            jQuery("#div_formu_per").dialog("open");
        }
    }
});

とにかくありがとう。

編集： キーダウンの代わりにキーアップを使用してみましたが、どうにかして取得するのに苦労した動作が壊れているようです。

警告:keydown(...)これを機能させるには、初期化の前に実行されるようにコード を配置する必要がありautocomplete(...)ます。そうしないと、オートコンプリートがイベントを処理し、機能しません。

于 2013-07-02T03:45:58.130 に答える