正在展开搜索栏，而不是在搜索前展开

Expanding search bar not expanding before search

本文关键字：搜索搜索栏更新时间：2023-09-26

运行此搜索时有两个问题。1：当点击放大镜时，它不是只打开搜索栏，而是立即搜索。2：如果键入的字符超过2个，然后搜索栏关闭（单击关闭），然后重新打开（单击返回），则搜索按钮和搜索文本没有正确对齐。https://jsfiddle.net/mkLj7dap/

HTML:

    <html lang="en">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
 <meta charset="UTF-8">
 <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<div class=" top-search">
        <div class="ty-search-block">
    <form action="www.example.com/" name="search_form" method="get" class="cm-processed-form">
        <input type="hidden" name="subcats" value="Y">
        <input type="hidden" name="pcode_from_q" value="Y">
        <input type="hidden" name="pshort" value="Y">
        <input type="hidden" name="pfull" value="Y">
        <input type="hidden" name="pname" value="Y">
        <input type="hidden" name="pkeywords" value="Y">
        <input type="hidden" name="search_performed" value="Y">


        <input type="text" name="hint_q" value="" id="search_input" title="" class="ty-search-block__input cm-hint"><button title="" class="ty-search-magnifier" type="submit"><i class="material-icons">search</i></button>
<input type="hidden" name="dispatch" value="products.search">
    </form>
</div>
    </div>
</body>
</html>

CSS：

.cm-processed-form{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;
    -webkit-transition: width 0.1s;
    -moz-transition: width 0.1s;
    -ms-transition: width 0.1s;
    -o-transition: width 0.1s;
    transition: width 0.1s;
}
.ty-search-block__input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:red;
}
.ty-search-block__input::-webkit-input-placeholder {
    color: #d74b4b;
}
.ty-search-block__input:-moz-placeholder {
    color: #d74b4b;
}
.ty-search-block__input::-moz-placeholder {
    color: #d74b4b;
}
.ty-search-block__input:-ms-input-placeholder {
    color: #d74b4b;
}
.ty-search-magnifier{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding-top:10px;
    margin:0;
    border:0;
    outline:0;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}
.cm-processed-form-open{
    width:100%;
}

JS:

$(document).ready(function(){
            var submitIcon = $('.ty-search-magnifier');
            var inputBox = $('.ty-search-block__input');
            var searchBox = $('.cm-processed-form');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.ty-search-magnifier').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.ty-search-block__input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.ty-search-magnifier').css('display','none');
                } else {
                    $('.ty-search-block__input').val('');
                    $('.ty-search-magnifier').css('display','block');
                }
            }

当搜索框未展开时，按以下方式更改脚本以防止默认的点击事件：

submitIcon.click(function (event) {
                if (isOpen == false) {
                    event.preventDefault();
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });