如何通过使用同一按钮使用文本框的两个ID来执行两种不同的操作

Question

在下面的文本框中，我有两个不同的ID（即“ s”和“ primary-search-input”），并且只有一个按钮。

第一个ID是插件ID，用于在用户输入任何关键字会获得相关建议时执行搜索建议工作。 第二个id（即primary-search-input），用于在用户单击按钮时获取搜索关键字结果。

在上述情况下，两个ID都有不同的不同任务。 当我将id =的第一和id ='primary-search-input'第二，如下所示时，它将仅执行第一个id动作（即获得建议），当我将id ='primary-search-input'放在第一和id时=''作为第二个位置，那么它将仅执行第一个id操作（即，在单击按钮时获取关键字结果）。

我的查询是，我如何同时执行两项操作，例如，当用户在文本框中输入任何文本时，他将获得建议，同时单击按钮时，也将在单击按钮时获得关键字结果。

<input name="s"  id="s" id="primary-search-input"  class="wide input" type="search" value="<?php if(isset($_GET['s']) && !isset($_GET['product'])) { echo sanitize_text_field(stripslashes(trim($_GET['s']))); } ?>" placeholder="<?php _e('I am shopping for...', 'framework')?>" />

<div id="primary-search-btn" class="medium primary btn"><a href="#"><i class="icon-search"></i></a></div>

Answer 1

您不能在单个输入中使用多个ID。 从XHTML 1.0 Spec

在XML中，片段标识符的类型为ID，每个元素只能有一个类型为ID的属性。 因此，在XHTML 1.0中，将id属性定义为ID类型。 为了确保XHTML 1.0文档是结构良好的XML文档，在上面列出的元素上定义片段标识符时，XHTML 1.0文档必须使用id属性。 有关确保在将XHTML文档作为媒体类型text / html提供服务时确保此类锚向后兼容的信息，请参见HTML兼容性指南。

每个元素只能有一个ID，但实际上可以有多个类。 但是没有多个类属性，请将多个类值放入一个属性中。

Answer 2

每个元素只能有一个类型为ID的属性。 但是，您可以使用data-* attributes 。 data-* attributes使我们能够在所有HTML元素上嵌入自定义数据属性。

您可以使用如下所示的HTML：

 <input name="s"  id="s" data-id="primary-search-input"  class="wide input" type="search" value="<?php if(isset($_GET['s']) && !isset($_GET['product'])) { echo sanitize_text_field(stripslashes(trim($_GET['s']))); } ?>"   placeholder="<?php _e('I am shopping for...', 'framework')?>" />

<div id="primary-search-btn" class="medium primary btn"><a href="#"><i class="icon-search"></i></a></div>   

请参阅此链接以获得更好的理解。

Answer 3

您不能将两个id用作输入。 网页的ID必须是唯一的。 我认为您应该像这样进行一些切换编程-

<input type="button" id="s" value="" onclick="toggle()">
<script>

var flag = 0;
function toggle(){

    if(flag == 0){
        // do some work whatever you wanna do first
        flag=1;
    }else{
        // Do some task whatever you wanna do next
        flag = 0;
    }
}
</script>