Expanding search bar not expanding before search

- 1 answer

Ad

There are 2 problems when running this search. 1: When clicking the magnifier, instead of just opening the search bar, it searches immediately. 2: if more than 2 characters are typed and then the search bar is closed (by click off it) then reopened (by clicking back on it) the search button and search text doesn't align properly. https://jsfiddle.net/mkLj7dap/

HTML:

    <html lang="en">
<head>
  <link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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');
                }
            }
Ad

Answer

Ad

Change the script as bellow to prevent the default click event, when search box not expanded:

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;
                }
            });
Ad
source: stackoverflow.com
Ad