Question

我正在创建搜索表单，当用户点击搜索图标时，我需要显示文本框，一旦我输入内容，再次点击相同的搜索图标，就需要显示搜索结果。以下是我使用的代码。

HTML＆amp;的Javascript

<div class="search_right"> 
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
 <div class="form-search">
 <input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
  <button type="submit" title="Search" id="but" onclick="tog_input();" >    
  </button>
  </div>
  <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
  <script type="text/javascript">
  function tog_input(){ 
  if(jQuery("#search").is(':visible'))
  {         
  if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();    
  }else{
  jQuery("#search").animate({ width: 'hide' }); 
  }
  }
  else
  {
  jQuery("#search").animate({ width: 'show' }); 
  } 
  }
  </script>
  </form>
  </div>
  <div class="clear"></div>
  </div>

现在问题是，当我点击搜索图标时，它显示搜索页面而不是文本框，任何帮助将不胜感激。

Answer 1

更改内联代码：

<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>

要：

<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>

避免这一行：

jQuery("#search_mini_form").submit();

仅在需要时阻止表单提交。

所以：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="search_right">
    <div class="search-top-container">
        <div class="search-top"></div>
        <div class="search-form">
            <div class="search-form-border"></div>
            <div class="search-top-title"><span class="icon"></span>Search</div>
            <form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
                <div class="form-search">
                    <input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
                           autocomplete="off">
                    <button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
                    </button>
                </div>
                <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
                <script type="text/javascript">

                    function tog_input(obj, e) {

                        if (jQuery("#search").is(':visible')) {

                            if (jQuery("#search").val() == '') {

                                jQuery("#search").animate({width: 'hide'});
                                e.preventDefault();
                            }
                        }
                        else {

                            e.preventDefault();

                            jQuery("#search").animate({width: 'show'});
                        }
                    }
                </script>
            </form>
        </div>
        <div class="clear"></div>
    </div>
</div>

Answer 2

我建议这是因为你的按钮类型是提交的。如果您将其更改为按钮类型=＆＃34;按钮＆＃34;然后它应该工作，虽然你可能需要另一个按钮来提交你的表格。

Answer 3

您需要阻止提交按钮的默认行为，否则它将最终出现在操作页面中。要实现它，你需要做 -

function tog_input(e){ 
   e.preventDefault();// prevents default action
   ... other code
}

Jquery提交表单上有点击事件的问题

3 个答案: