1

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

  1. 如果用户在焦点位于搜索框上时按下回车键，它应该打开一个表单（无论当前匹配项如何）。
  2. 如果系统找到匹配项并且用户通过按回车键从列表中选择它，它应该显示一个不同的对话框。

问题是我无法区分事件，因为似乎当我从匹配的自动完成列表中选择一个选项时，文本框会保持焦点。

这就是我现在所处的位置：

我的自动完成功能：

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");
        }
    }
});

不管怎么说，还是要谢谢你。

编辑： 我尝试使用 keyup 而不是 keydown，但它似乎以某种方式破坏了我努力获得的行为。

警告： 要使其工作，您需要放置keydown(...)代码以便在autocomplete(...)初始化之前执行它，否则自动完成将处理该事件并且它将无法工作。

于 2013-07-02T03:45:58.130 回答