jquery - 更改 jquery 自动完成中的输入键行为

Question

我正在使用 jquery 的自动完成小部件，我希望输入键有两个用途:

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>

Answer 1

好的，我找到方法了!在事件监听器中，我添加了 !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");
        }
    }
});

无论如何，谢谢。

编辑: 我尝试使用 keyup 而不是 keydown，但似乎它在某种程度上破坏了我努力实现的行为。

警告: 为此，您需要放置 keydown(...) 代码，以便它在 autocomplete(...) 初始化之前执行，否则自动完成将处理该事件将不起作用。