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

【问题标题】：change enter key behavior in jquery autocomplete更改 jquery 自动完成中的输入键行为
【发布时间】：2013-07-02 03:14:25
【问题描述】：

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

如果用户在焦点位于搜索框上时按 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>

【问题讨论】：

当打开两个新表单中的任何一个时，您还希望自动完成功能处于活动状态吗？您能否提供随附的 HTML，以便我们了解 DOM 结构？
@DevlshOne：当打开两个新 div 中的任何一个时，我不需要激活自动完成功能。我打算使用 enter 键打开一个新表单，除非它被用于匹配选择。
看起来您找到了自己的解决方案 - 干得好。

标签： jquery jquery-ui

【解决方案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(...) 初始化之前执行它，否则自动完成将处理该事件并且它将不起作用。

【讨论】：