v1.0核心
v1.0实例
v2.0

Autocomplete 自动完成

使用说明 PLUGIN

本框架自动完成功能是从awsomplete插件v1.1.5改造而来，该插件是github上很受欢迎的自动完成插件，详见github或在线演示DEMO。本框架版本在原版版本基础上进行了些许修改，以保持风格统一，功能更实用，修改内容如下:

  • 插件中的样式均增加ax-前缀。
  • 增加了参数text，控制提示文字是否显示，默认false，可选true；可以属性data-text=*的形式使用。
  • 修改了默认参数insertLocation为append。
  • 事件名均改成ax开头，awesomplete-select改成axcomplete-select，awesomplete-selectcomplete改成axcomplete-selectcomplete，awesomplete-open改成axcomplete-open，awesomplete-close改成axcsomplete-close。
  • 修改源码，只匹配纯文本，不匹配html标签。

基本使用

对input使用ax-complete类即表示使用自动完成功能，使用data-list属性列举下拉菜单选项，用英文逗号隔开。

名称
输入a看看！ 
                                <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" class="ax-complete" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子" />
                                            </div>
                                        </div>
                                    </div>
                                </div>

单独列举选项

使用#id值填入data-list属性，以独立形式引用选项。

名称
输入a看看！ 
                                <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" class="ax-complete" data-list="#list01" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <ul id="list01" style="display: none;">
                                    <li>Apple苹果</li>
                                    <li>Banana香蕉</li>
                                    <li>Tomato西红柿</li>
                                    <li>Grape葡萄</li>
                                    <li>Haw山楂</li>
                                    <li>Lemon柠檬</li>
                                    <li>Orange橙子</li>
                                </ul>

显示文字提示

新增的text属性表示是否显示结果提示文字，默认是false，不会显示结果提示文字，可选true表示显示提示文字。可对元素按设置data-text=*的属性方法使用该参数。

名称
输入a看看！ 
                                <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" class="ax-complete" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子" textShow="false"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

指定筛选范围

将固定的html格式写入option中，只匹配某个标签中的内容，本例只匹配ax-col中的文字。详见演示效果。

名称
输入a看看！
JS HTML 
  • <script type='text/javascript'>
        function itemFilter(text, input){
            var list = $('#filter-list');
            var replace = list.find('option[value='+text.value+']').find('.ax-col').html().replace(RegExp(input.trim(),"gi"), '<mark>$&</mark>');
            var item = list.find('option[value='+text.value+']').html().replace(/<div class="ax-col"[\s\S]*?<\/div>/ig, '<span class="ax-col">'+replace+'</span>');
            return Axcomplete.$.create("li", {
                "class": "ax-info-block",
                innerHTML: item
            });
        }
        $(document).ready(function() {
            var completeFilter = new Axcomplete(document.getElementById("filter-input"), {
                item: itemFilter
            });
        });
</script>
                        
  •                                 <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" list="filter-list" id="filter-input"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <datalist id="filter-list">
                                    <option value="Apple苹果"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></span><div class="ax-col">Apple苹果</div><span class="ax-arrow">215</span></option>
                                    <option value="Banana香蕉"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head02.jpg)"></span><div class="ax-col">Banana香蕉</div><span class="ax-arrow">105</span></option>
                                    <option value="Tomato西红柿"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head03.jpg)"></span><div class="ax-col">Tomato西红柿</div><span class="ax-arrow">1278</span></option>
                                    <option value="Grape葡萄"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head04.jpg)"></span><div class="ax-col">Grape葡萄</div><span class="ax-arrow">384</span></option>
                                    <option value="Haw山楂"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head05.jpg)"></span><div class="ax-col">Haw山楂</div><span class="ax-arrow">24</span></option>
                                    <option value="Lemon柠檬"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head06.jpg)"></span><div class="ax-col">Lemon柠檬</div><span class="ax-arrow">567</span></option>
                                    <option value="Orange橙子"><span class="ax-head" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head07.jpg)"></span><div class="ax-col">Orange橙子</div><span class="ax-arrow">193</span></option>
                                </datalist>

自定义列表

将所需要呈现在选项中的内容通过属性写在option中，用js重新组合html结构。详见演示效果。

名称
输入a看看！
JS HTML 
  • <script type='text/javascript'>
        function itemFun(text, input){
            var labelImg = document.createElement("span");
            var labelNum = document.createElement("span");
            var labelTitle = document.createElement("div");
            // var labelTxt = text.replace(RegExp(input.trim(),"g"), '<mark>$&</mark>');//区分大小写
            var labelTxt = text.replace(RegExp(input.trim(),"gi"), '<mark>$&</mark>');//不区分大小写，加i即可
            labelImg.className = 'ax-head';
            labelNum.className='ax-arrow';
            labelTitle.className='ax-col';
            labelImg.style.backgroundImage ='url('+$("#cus-list").find('option[value='+text.value+']').attr("data-img")+')';
            labelNum.innerText =$("#cus-list").find('option[value='+text.value+']').attr("data-num");
            labelTitle.innerHTML=labelTxt;
            return Axcomplete.$.create("li", {
                "class": "ax-info-block",
                innerHTML: labelImg.outerHTML + labelTitle.outerHTML + labelNum.outerHTML,
            });
        }
        var completeCus = new Axcomplete(document.getElementById("cus-input"), {item: itemFun});
</script>
                        
  •                                 <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" list="cus-list" id="cus-input" />
                                                <datalist id="cus-list">
                                                    <option data-num="215" data-img="https://src.axui.cn/v1.0/examples/images/head01.jpg" value="Apple苹果">Apple苹果</option>
                                                    <option data-num="105" data-img="https://src.axui.cn/v1.0/examples/images/head02.jpg" value="Banana香蕉">Banana香蕉</option>
                                                    <option data-num="1278" data-img="https://src.axui.cn/v1.0/examples/images/head03.jpg" value="Tomato西红柿">Tomato西红柿</option>
                                                    <option data-num="384" data-img="https://src.axui.cn/v1.0/examples/images/head04.jpg" value="Grape葡萄">Grape葡萄</option>
                                                    <option data-num="24" data-img="https://src.axui.cn/v1.0/examples/images/head05.jpg" value="Haw山楂">Haw山楂</option>
                                                    <option data-num="567" data-img="https://src.axui.cn/v1.0/examples/images/head06.jpg" value="Lemon柠檬">Lemon柠檬</option>
                                                    <option data-num="193" data-img="https://src.axui.cn/v1.0/examples/images/head07.jpg" value="Orange橙子">Orange橙子</option>
                                                </datalist>
                                            </div>
                                        </div>
                                    </div>
                                </div>

用按钮打开选项

详见演示效果。

名称
输入a看看！
JS HTML 
  • <script type='text/javascript'>
        var comboplete01 = new Axcomplete(document.getElementById("input01"));
        $('.open-complete').click(function () {
            if (comboplete01.ul.childNodes.length === 0) {
                comboplete01.minChars = 0;
                comboplete01.evaluate();
            }
            else if (comboplete01.ul.hasAttribute('hidden')) {
                comboplete01.open();
            }
            else {
                comboplete01.close();
            }
        });
</script>
                        
  •                                 <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" id="input01" data-list="Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子" />
                                                <span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-down open-complete"></a></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>