Search 搜索

使用说明

借助对input的美化和组合,可以实现一般的自适应搜索框,详见Input表单基础和详见Form表单组合。以下实例复制可用。

简单搜索:
分离搜索:
搜索
组合搜索:
图标搜索:
指示搜索:
自动搜索:
选择范围
搜索
                        <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-with-suffix">
                                                <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 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-with-suffix">
                                                <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-prefix"><span class="ax-iconfont ax-icon-search"></span></span>
                                            <div class="ax-flex-block ax-with-suffix">
                                                <input name="username" placeholder="输入关键字..." type="text">
                                            </div>
                                            <a href="###" class="ax-suffix 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>

                        <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">
                                            <select axSelect data-width="120px" data-className="ax-prefix-select">
                                                <option value="86">娱乐新闻</option>
                                                <option value="81">时事政治</option>
                                                <option value="82">财经报道</option>
                                            </select>

                                            <div class="ax-flex-block ax-with-suffix">
                                                <input name="username" placeholder="输入关键字..." type="text">
                                            </div>
                                            <a href="###" class="ax-suffix ax-btn ax-primary">搜索</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        

完全搜索

本框架专门制作了一套搜索组件,组件包含的功能有:范围选择(下拉菜单),搜索提示,清除搜索内容,功能按钮,显示历史搜索(下拉菜单),自动完成。用户可根据需要进行组合使用(做减法)。为了实现搜索条的功能使用了部分js代码。

每个子内容可需选择使用,但是不能打乱顺序,结构如下:

  •                                 <form>
                                        <div class="ax-search">
                                            <select axSelect></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 axSelect data-width="120px">
                                            <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" axComplete data-rel="#toggle" 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="###" id="toggle" class="ax-iconfont ax-icon-down"></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" axComplete data-rel="#toggle01" 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="###" id="toggle01" class="ax-iconfont ax-icon-downe"></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 axSelect data-width="120px">
                                            <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 axSelect data-width="120px">
                                            <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" axComplete data-rel="#toggle02" 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="###" id="toggle02" class="ax-iconfont ax-icon-down"></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" axComplete data-rel="#toggle03" 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="###" id="toggle03" class="ax-iconfont ax-icon-down"></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 axSelect data-width="120px">
                                            <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" axComplete data-rel="#toggle04" 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="###" id="toggle04" class="ax-iconfont ax-icon-down"></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" axComplete data-rel="#toggle05" 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="###" id="toggle05" class="ax-iconfont ax-icon-down"></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 axSelect data-width="120px">
                                            <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" axComplete data-rel="#toggle06" 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="###" id="toggle06" class="ax-iconfont ax-icon-down"></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" axComplete data-rel="#toggle07" 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="###" id="toggle07" 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>