Autocomplete 自动完成

使用说明 PLUGIN

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

  • 插件中的样式均增加ax-前缀。
  • 增加了参数text,控制提示文字是否显示,默认false,可选true;可以属性data-text=*的形式使用。
  • 修改了默认参数insertLocationappend
  • 事件名均改成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看看!
  • <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/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/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/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/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/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/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/examples/images/head07.jpg)"></span><div class="ax-col">Orange橙子</div><span class="ax-arrow">193</span></option>
                                    </datalist>
                                        

自定义列表

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

名称
输入a看看!
  • <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/examples/images/head01.jpg" value="Apple苹果">Apple苹果</option>
                                                        <option data-num="105" data-img="https://src.axui.cn/examples/images/head02.jpg" value="Banana香蕉">Banana香蕉</option>
                                                        <option data-num="1278" data-img="https://src.axui.cn/examples/images/head03.jpg" value="Tomato西红柿">Tomato西红柿</option>
                                                        <option data-num="384" data-img="https://src.axui.cn/examples/images/head04.jpg" value="Grape葡萄">Grape葡萄</option>
                                                        <option data-num="24" data-img="https://src.axui.cn/examples/images/head05.jpg" value="Haw山楂">Haw山楂</option>
                                                        <option data-num="567" data-img="https://src.axui.cn/examples/images/head06.jpg" value="Lemon柠檬">Lemon柠檬</option>
                                                        <option data-num="193" data-img="https://src.axui.cn/examples/images/head07.jpg" value="Orange橙子">Orange橙子</option>
                                                    </datalist>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        

用按钮打开选项

详见演示效果。

名称
输入a看看!
  • <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>