検索ボックスで半角英数字を入力し検索をしても検索ができない。
ひらがなや漢字であれば検索文字を受け取って検索するのですが、半角英数字だと反応しません。
半角英数字の判定などは特に入れていないのですが、反応しなくなる理由がわからずにいます。
どなたかご教授いただける方いらっしゃいますでしょうか?
よろしくお願いします。
<div class="menu-search-wrap">
<label>
<!--正常に検索が行える。-->
<input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="アイテムを検索" class="search-keyword">
</label>
<a href="<{$search_form.search_url}>" class="menu-search-btn search-url"><i class="material-icons">search</i></a>
</div>
<div class="header__navgroup_sp">
<div class="hidden_box">
<label for="label1">
<img class="header__icon_sp" src="https://hogehoge.png">
</label>
中略
</div>
</div>
<input type="checkbox" id="label1"/>
<div class="hidden_show">
<form method="get" class="search_container">
<label>
<!--この検索ボックスが半角英数字に反応しない。-->
<input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="アイテムを検索" class="search-keyword">
</label>
<a href="<{$search_form.search_url}>" class="menu-search-bfn search-url"> <img src=“https://hogehoge.png></a>
</form>
</div>
.menu-search-wrap {
height: 4rem;
line-height: 4rem;
display: flex;
justify-content: space-between;
border-bottom: solid 1px #7a7b7b;
margin-bottom: 5vh;
position: relative;
}
.menu-search-wrap input {
width: 100%;
height: 4rem;
background: none;
position: absolute;
z-index: 5;
color: white;
}
.header__navgroup_sp {
display: flex;
flex: none;
height: 50px;
}
.header__navgroup_sp>*+* {
margin-left: 6px;
margin-right: 6px;
}
.hidden_box {
margin-top: 7px;
display: flex;
}
/*チェックは見えなくする*/
.hidden_box input[type=checkbox] {
display: none;
}
.header__inner_sp{
max-width: 1552px;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.header__inner_sp input[type=checkbox] {
display: none;
}
.header__icon_sp {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
flex: none;
width: auto;
height: 27px;
}
.hidden_show {
display: flex;
justify-content: center;
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
flex-basis: 100%;
}
/*クリックで中身表示*/
input:checked~.hidden_show {
height: auto;
opacity: 1;
}
.search_container input[type="text"] {
border: none;
height: 2.0em;
width: 94%;
background-color: white;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="image"i] {
width: 17px;
height: 17px;
margin-top: 5px;
padding: initial;
}
.menu-search-btn {
font-weight: 2rem;
z-index: 10;
}
$(function(){
$('.search-keyword').on('keypress', function(e) {
if (e.keyCode == 13) {
var index = $('.search-keyword').index(this);
$('.search-url')[index].click();
}
});
});