search
实例
---
```html
<header class="header box flex">
<div class="flex0 plr12 relative"><i class="phoenix_icon phoenix_icon_left"></i><page></page></div>
<div class="flex1 relative">
<div class="absolute left0 top0 i18 plr12 color_gray3"><i class="phoenix_icon phoenix_icon_search"></i></div>
<div class="plr5">
<input type="text" placeholder="请输入搜索关键字搜索" class="mt5 bg_gray1 plr10 lh32 radius4 searchInput" style="padding-left:30px;width:100%;">
</div>
<div class="absolute right0 top0" style="right:4px;">
<div class="relative plr12 i18 color_gray3 hide searchDel">
<div class="link"></div>
<i class="phoenix_icon phoenix_icon_close-circle"></i>
</div>
</div>
</div>
<div class="flex0 plr12 relative"><div class="link searchBtn"></div>搜索</div>
</header>
<div class="content">
<div class="searchHistory"></div>
<div class="hide searchResult">
<div class="touch_wrapper"></div>
</div>
</div>
```
```javascript
// 获取本地搜索记录
var searchArray;
if("undefined" != typeof plus) {
if(plus.storage.getItem('phoenixSearchHistory') === null) {// 没有《历史搜索》
searchArray= [];
} else {
searchArray= JSON.parse( plus.storage.getItem('phoenixSearchHistory') );
};
} else {
searchArray= [];
};
// 实例化搜索插件
new phoenix.search({
searchInput: page.querySelector('.searchInput'),// 必需,搜索输入框
searchInputDel: page.querySelector('.searchDel'),// 必需,输入框内的删除图标
searchBtn: page.querySelector('.searchBtn'),// 必需,搜索按钮
searchContent: page.querySelector('.searchHistory'),// 必需,历史搜索关键词显示区
searchList: searchArray,// 必需,搜索历史记录
searchResult:page.querySelector('.searchResult'),// 必需,搜索结果显示区
loadResult: function (searchKey) {// 必需,搜索回调
// 回调函数,searchKey值为输入搜索的关键字
},
editHistory: function (searchArray) {// 必需,回调函数,修改本地历史搜索,不用修改
if("undefined" != typeof plus) {
if(searchArray.length > 0) {
plus.storage.setItem("phoenixSearchHistory",JSON.stringify(searchArray));
} else {
plus.storage.removeItem("phoenixSearchHistory");
};
}
},
});
```
配置项
---
|属性|类型|默认值|说明|
|-|-|-|-|