Search 搜索
使用说明
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">简单搜索：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="text" placeholder="输入关键字..."><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><a href="###" class="ax-iconfont ax-icon-search"></a></span></div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">分离搜索：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="输入关键字..." value="" type="text">
<span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">搜索</a>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">组合搜索：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-suffix-prev">
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
<a href="###" class="ax-operate ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">图标搜索：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<div class="ax-flex-block ax-suffix-prev">
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
</div>
<a href="###" class="ax-suffix ax-btn"><i class="ax-iconfont ax-icon-search"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">指示搜索：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row ax-input-group">
<span class="ax-title ax-btn ax-icon"><span class="ax-iconfont ax-icon-search"></span></span>
<div class="ax-flex-block ax-suffix-prev">
<input name="username" placeholder="输入关键字..." type="text">
</div>
<a href="###" class="ax-operate ax-btn ax-primary">搜索</a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">自动搜索：</div>
<div class="ax-form-con">
<div class="ax-form-input"><span class="ax-pos-left ax-iconfont ax-icon-search ax-color-ignore" style="width:20px"></span><input name="username" placeholder="输入关键字..." type="text"></div>
</div>
</div>
</div>
完全搜索 JS
本框架专门制作了一套搜索组件，组件包含的功能有：范围选择（下拉菜单），搜索提示，清除搜索内容，功能按钮，显示历史搜索（下拉菜单），自动完成。用户可根据需要进行组合使用（做减法）。为了实现搜索条的功能使用了部分js代码。
每个子内容可需选择使用，但是不能打乱顺序，结构如下：
-
<form> <div class="ax-search"> <select class="ax-select"></select><!--范围选择（可选）--> <div class="ax-search-center"> <i class="ax-adorn"></i><!--点缀（可选）--> <input type="text"><!--搜索关键字（必选）--> <span class="ax-operate"> <a class="ax-reset"></a><!--清空（可选）--> <a class="ax-toggle"></a><!--打开自动补全（可选）--> </span> </div> <a class="ax-search-end">搜索一下</a><!--搜索按钮，可以是a、input或button（可选）--> </div> </form> -
<script type='text/javascript'> $(".ax-search").each(function () { var that=$(this); var input=that.find('input[type=text]'); var reset=that.find('.ax-reset'); var toggle=that.find('.ax-toggle'); var use=false; if(input.attr('data-list') != '' && typeof(input.attr('data-list')) != 'undefined' ){ use=true; }else if(input.attr('list') != '' && typeof(input.attr('list')) != 'undefined'){ use=true; }else{ use=false; } if(use==true){ var complete = new Axcomplete(input[0]); toggle.click(function () { if (complete.ul.childNodes.length === 0) { complete.minChars = 0; complete.evaluate(); } else if (complete.ul.hasAttribute('hidden')) { complete.evaluate(); } else { complete.close(); } }); } reset.on('click',function () { input.val(''); $(this).hide(); if(use==true){ complete.minChars = 0; complete.close(); } }); input.on("input", function () { if($(this).val()==''){ reset.hide(); }else{ reset.css('display','inline-block'); } }); if(use==true){ input[0].addEventListener("axcomplete-select", function(e){ reset.css('display','inline-block'); }, false); } }); </script>
以下演示完全状态下的搜索：
输入a看看！
<form>
<div class="ax-search">
<select class="ax-select">
<option value="86">娱乐新闻</option>
<option value="81">时事政治</option>
<option value="82">财经报道</option>
</select>
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
<!--
<input type="submit" class="ax-search-end" value="搜索一下">
<button type="button" class="ax-search-end">搜索一下</button>
-->
</div>
</form>
简化搜索
通过对完全搜索组件进行删减可得到不少组合搜索方式，以下为举例示意：
输入a看看！
<form>
<div class="ax-search">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-text="false" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search">
<div class="ax-search-center">
<input name="username" placeholder="输入关键字..." type="text">
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search">
<div class="ax-search-center">
<input name="username" placeholder="输入关键字..." type="text">
</div>
<a href="###" class="ax-search-end ax-iconfont ax-icon-search"></a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text">
</div>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search">
<select class="ax-select">
<option value="86">娱乐新闻</option>
<option value="81">时事政治</option>
<option value="82">财经报道</option>
</select>
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
深色搜索
对ax-search追加ax-dark类即可实现深色搜索条风格，深色与主色一致。同样的可以对深色搜索进行简化处理可创建多种深色搜索风格。
输入a看看！
<form>
<div class="ax-search ax-dark">
<select class="ax-select">
<option value="86">娱乐新闻</option>
<option value="81">时事政治</option>
<option value="82">财经报道</option>
</select>
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search ax-dark">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search ax-dark">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
圆形风格
对ax-search追加ax-round类即可实现圆形风格。
输入a看看！
<form>
<div class="ax-search ax-round">
<select class="ax-select">
<option value="86">娱乐新闻</option>
<option value="81">时事政治</option>
<option value="82">财经报道</option>
</select>
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>输入a看看！
<div class="ax-break"></div>
<form>
<div class="ax-search ax-round">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search ax-round">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
方形风格
对ax-search追加ax-square类即可实现方形风格。
输入a看看！
<form>
<div class="ax-search ax-square">
<select class="ax-select">
<option value="86">娱乐新闻</option>
<option value="81">时事政治</option>
<option value="82">财经报道</option>
</select>
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>输入a看看！
<div class="ax-break"></div>
<form>
<div class="ax-search ax-square">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a><a href="###" class="ax-iconfont ax-icon-mic"></a><a href="###" class="ax-iconfont ax-icon-camera"></a><a href="###" class="ax-iconfont ax-icon-down ax-toggle"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>
<div class="ax-break"></div>
<form>
<div class="ax-search ax-square">
<div class="ax-search-center">
<i class="ax-iconfont ax-icon-search ax-adorn"></i>
<input name="username" placeholder="输入关键字..." type="text">
<span class="ax-operate"><a href="###" class="ax-iconfont ax-icon-close ax-reset"></a></span>
</div>
<a href="###" class="ax-search-end">搜索一下</a>
</div>
</form>