独木为夕
独木为夕
  • 发布:2017-08-14 17:51
  • 更新:2020-02-18 16:34
  • 阅读:2961

mui.indexedlist 动态添加数据后 搜索功能失效

分类:MUI

搜索功能失效或者搜索的内容与展现的数据不一致 怎么解决

2017-08-14 17:51 负责人:无 分享
已邀请:
独木为夕

独木为夕 (作者) - 接外包

在网上找到了解决的办法!已试过 可以!代码如下!

  1. <script src="../../../js/mui.indexedlist.js"></script> 把引用的这个js去掉
  2. 直接复制即可 $(function() {
    var document_height = parseInt($(document).height());
    var list_height = document_height - 44;

        var indexed_height = list_height - 35;  
    
        $("#list").css({"height": list_height + "px"});  
        $(".mui-indexed-list-bar,.mui-indexed-list-inner").css({"height": indexed_height});  
        var alpha_num = $(".mui-indexed-list-bar").children("a").length;  
    
        if (alpha_num > 0) {  
            var alpaha_height = parseInt(indexed_height / alpha_num);  
            $(".mui-indexed-list-bar").children("a").css({"height": alpaha_height + "px", "line-height": alpaha_height + "px"})  
        }  
    
        //字母点击  
        $(".mui-indexed-list-bar").children("a").click(function() {  
            var alpha = $(this).text();  
            $(".mui-indexed-list-alert").show().text(alpha);  
            $(".mui-indexed-list-bar").addClass("active");  
            $(this).addClass("active").siblings("a").removeClass("active");  
    
            setTimeout(function() {  
                $(".mui-indexed-list-bar").removeClass("active");  
                $(".mui-indexed-list-alert").hide()  
            }, 300)  
        })  
        //关键词搜索  
        $(".mui-indexed-list-search-input").keyup(function() {  
            var keyword = ($(this).val()).toLowerCase();  
            $(".mui-title").text(keyword);  
            var groups = [];  
            if (keyword != '') {  
    
                $(".mui-indexed-list-item").each(function() {  
                    var tags = ($(this).attr("data-tags")).toLowerCase();  
                    var value = ($(this).attr("data-value")).toLowerCase();  
                    var title = $(this).text();  
                    //关键字 首字母大写、拼音和中文检索  
                    if (tags.indexOf(keyword) >= 0 || value.indexOf(keyword) >= 0 || title.indexOf(keyword) >= 0) {  
                        groups.push(tags.substr(0, 1));  
    
                        $(this).show();  
                    } else {  
                        $(this).hide();  
                    }  
                })  
    
                var groups_unique = getUnique(groups);  
                $(".mui-indexed-list-group").each(function() {  
                    var group_value = ($(this).attr("data-group")).toLowerCase();  
    
                    if ($.inArray(group_value, groups_unique) >= 0) {  
                        $(this).show();  
                    } else {  
                        $(this).hide();  
                    }  
                })  
                var length = $(".mui-indexed-list-item:visible").length;  
                if (length == 0) {  
                    $('.mui-indexed-list-empty-alert').show();  
                } else {  
                    $('.mui-indexed-list-empty-alert').hide();  
                }  
                $(".group_hot").hide();  
            } else {  
    
                $(".mui-indexed-list-item,.mui-indexed-list-group,.mui-table-view,.group_hot").show();  
                $(".mui-indexed-list-empty-alert").hide();  
            }  
    
        })  
        //搜索清除符号  
        mui(".mui-icon-clear")[0].addEventListener('tap', function() {  
            $(".mui-indexed-list-item,.mui-indexed-list-group,.mui-table-view,.group_hot").show();  
            $(".mui-indexed-list-empty-alert").hide();  
        });  
        //点击选择区号  
        $(".mui-indexed-list-item").click(function() {  
            var code = $(this).find(".code_box").text();  
            $("#code_prefix").text(code);  
            $('#containner').show();  
            $("#window_box").hide();  
        })  
    });  
    
    //头部左上角关闭索引弹出层  
    function closeIndexList() {  
        $('#containner').show();  
        $("#window_box").hide();  
        $(".mui-indexed-list-search-input").val('');  
        $(".mui-indexed-list-item,.mui-indexed-list-group,.mui-table-view,.group_hot").show();  
        $(".mui-indexed-list-empty-alert").hide();  
    }  
    //去除重复数组  
    function getUnique(someArray) {  
        tempArray = someArray.slice(0);//复制数组到临时数组  
        for (var i = 0; i < tempArray.length; i++)  
        {  
            for (var j = i + 1; j < tempArray.length; )  
            {  
                if (tempArray[j] == tempArray[i])  
                //后面的元素若和待比较的相同,则删除并计数;  
                //删除后,后面的元素会自动提前,所以指针j不移动  
                {  
                    tempArray.splice(j, 1);  
                }  
                else  
                {  
                    j++;  
                }  
         //不同,则指针移动  
            }  
        }  
        return tempArray;  
    }
TengDD

TengDD

感谢大佬! 很实用! 就是下面的 "group_hot" 不明白是哪里的class?
var length = $(".mui-indexed-list-item:visible").length;
if (length == 0) {
$('.mui-indexed-list-empty-alert').show();
} else {
$('.mui-indexed-list-empty-alert').hide();
}
$(".group_hot").hide();

  • 独木为夕 (作者)

    可以忽略 我以前写的有热门城市

    2020-02-19 21:11

该问题目前已经被锁定, 无法添加新回复