扩展的搜索栏自动填充时关闭

Question

我用html5，css3和jquery制作了一个扩展的搜索栏。我的问题是，当浏览器自动填充任何内容并提交时，搜索栏会关闭而不是提交。

这是我的代码。

$('.searchbox-input').prop('required', 'true'); 
 
$(document).ready(function() { 
 
    var submitIcon = $('.searchbox-icon'); 
 
    var inputBox = $('.searchbox-input'); 
 
    var searchbox = $('.searchbox'); 
 
    var isOpen = false; 
 
    submitIcon.click(function() { 
 
     if (!isOpen) { 
 
      searchbox.addClass('searchbox-open'); 
 
      inputBox.focus(); 
 
      isOpen = true; 
 
     } else { 
 
      searchbox.removeClass('searchbox-open'); 
 
      inputBox.focusout(); 
 
      isOpen = false; 
 
     } 
 
    }); 
 

 
    $('#search').keyup(function() { 
 
     buttonUp(); 
 
    }); 
 

 

 
    submitIcon.mouseup(function() { 
 
     return false; 
 
    }); 
 
    searchbox.mouseup(function() { 
 
     return false; 
 
    }); 
 
    $(document).mouseup(function() { 
 
     if (isOpen) { 
 
      $('.searchbox-icon').css('display', 'block'); 
 
      submitIcon.click(); 
 
     } 
 
    }); 
 
}); 
 

 
function buttonUp() { 
 
    var inputVal = $('.searchbox-input').val(); 
 
    inputVal = $.trim(inputVal).length; 
 

 
    if (inputVal !== 0) { 
 
     $('.searchbox-icon').css('display', 'none'); 
 
    } else { 
 
     $('.searchbox-input').val(''); 
 
     $('.searchbox-icon').css('display', 'block'); 
 
    } 
 
}

/* Searchbar */ 
 
.container { 
 
    width: 25%; 
 
    position: absolute; 
 
    top: 36px; 
 
    right: 200px; 
 
} 
 
.searchbox { 
 
    height: 40px; 
 
    width: 100%; 
 
} 
 
.searchbox-input { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    border: 0; 
 
    outline: none; 
 
    background: #313132; 
 
    width: 80%; 
 
    height: 40px; 
 
    margin: 0; 
 
    padding-left: 20px; 
 
    font-size: 17px; 
 
    color: #efefef; 
 
    outline-style:none; 
 
    box-shadow:none; 
 
    border-color:transparent; 
 
    font-family: Comfortaa, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
 
} 
 
.searchbox-input:focus { 
 
    outline-style:none; 
 
    box-shadow:none; 
 
    border-color:transparent; 
 
} 
 
.searchbox-input::-webkit-input-placeholder { 
 
    color: #808080; 
 
} 
 
.searchbox-input:-moz-placeholder { 
 
    color: #808080; 
 
} 
 
.searchbox-input::-moz-placeholder { 
 
    color: #808080; 
 
} 
 
.searchbox-input:-ms-input-placeholder { 
 
    color: #808080; 
 
} 
 
.searchbox-icon, .searchbox-submit { 
 
    width: 40px; 
 
    height: 40px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: none; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    color: #313132; 
 
    font-size: 20px; 
 
    background: #4BC599; 
 
} 
 
.searchbox { 
 
    position: relative; 
 
    min-width: 40px; 
 
    width: 0%; 
 
    height: 40px; 
 
    float: right; 
 
    overflow: hidden; 
 
    -webkit-transition: width 0.1s; 
 
    -moz-transition: width 0.1s; 
 
    -ms-transition: width 0.1s; 
 
    -0-transition: width 0.1s; 
 
    transition: width 0.1s; 
 
} 
 
.searchbox-open { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <form action="" class="searchbox"> 
 
     <input type="text" class="searchbox-input" placeholder="Enter search term" name="search" id="search"> 
 
     <button type="submit" class="searchbox-submit" value=""><i class="fa fa-search"></i> 
 
     </button> \t <span class="searchbox-icon"><i class="fa fa-search"></i></span> 
 

 
    </form> 
 
</div>

我希望你能帮助我。

问候和感谢

Answer 1

为了让您的示例正常工作，您必须声明，你需要通过在左上角选择它使用jQuery。

您的代码问题在于提交按钮从未实际按下，因为它位于图标按钮下方。这拨弄应该工作

http://jsfiddle.net/g1qtaoy9/3/

基本上我只是手动触发提交时，时间是正确的

submitIcon.click(function() { 
    if (!isOpen) { 
     searchbox.addClass('searchbox-open'); 
     inputBox.focus(); 

     isOpen = true; 
    } else { 
     searchbox.removeClass('searchbox-open'); 
     inputBox.focusout(); 
     searchbox.submit(); 
     isOpen = false; 
    } 
});