搜索框效果:
React Html:
<form onSubmit={e => this.searchItem(keyword, e)}> <img src="./images/icons/search-icon.png" className="search-icon" /> <input type="search" autoFocus={!searchResult.scrollTop} value={keyword} onChange={e => this.setKeyword(e.target.value)} placeholder="搜索商城商品" onFocus={keyword?null:()=>this.switchTips(true)} /> <span onClick={() => this.searchItem(keyword)}>搜索</span> </form> // or <form onSubmit={e => this.searchItem(keyword, e)}> <img src="./images/icons/search-icon.png" className="search-icon" /> <input type="search" autoFocus={!searchResult.scrollTop} value={keyword} onChange={e => this.setKeyword(e.target.value)} placeholder="搜索商城商品" onFocus={keyword?null:()=>this.switchTips(true)} /> <input type="submit" value="搜索" /> </form>
Search Function:
searchItem(keyword, e) { if (e) e.preventDefault(); keyword = keyword.trim(); document.activeElement.blur(); // 很关键的一部,失去焦点,兼容IOS if (keyword) { SearchActions.byKeyword(keyword); } }
Css Style:
.search-bar padding: .5em 1em; background: $bgColor; .search-icon position: absolute; margin-left: 10px; margin-top: 7px; width: 1.4em; input height: 30px; width: 73%; outline: none; border-radius: 15px; border $borderStyle padding-left: 2.6em; margin-right: 10px; /* Or */ .search-bar padding: .5em 1em; background: $bgColor; .search-icon position: absolute; margin-left: 10px; margin-top: 7px; width: 1.4em; input[type=search] height: 30px; width: 73%; outline: none; border-radius: 15px; border $borderStyle padding-left: 2.6em; margin-right: 10px; input[type=submit] background none border: none; outline none