Question

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

HTML：

method y

CSS：

    <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>

JS：

.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%;
}

Answer 1

如果未展开搜索框，请将脚本更改为低于默认点击事件：

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

在搜索之前扩展搜索栏不展开

1 个答案: