Question

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

如果用户在焦点位于搜索框时点击回车键，则应打开表单（无论当前匹配如何）。
如果系统通过按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(...)初始化之前执行，否则自动完成将处理该事件并且无法正常工作。

更改在jquery自动完成中输入关键行为

1 个答案: