Question

所以，我有一个JavaScript搜索系统，除了一个问题外，它可以很好地工作：如果你从<ul>搜索某些东西，那么它会弄乱项目的定位。我在下面有照片，我希望这是可以理解的。在这张图片中，您可以看到所有内容都已定位并在线等。

现在我使用搜索来搜索“karambit”项目，正如您所看到的，它已经不再排列了：

所以，我的问题是，这有可能以某种方式解决这个衬里吗？

这是我的搜索系统的JavaScript：

$('#SearchItemsFromList').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis === "") {
        $('#inventory > li > div').show();
    } else {
        $('#inventory > li > div').each(function() {
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
        });
    }
});

要在那里显示这些项目，我使用的是插件Material Design Hierarchical Display。

以下是这些项目的HTML代码，append使用JavaScript。

<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:13.5px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 0px;height: 295px;box-shadow: inset 0px 0px 25px 2px #232323;border: 1px solid black' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left;font-size: 14.5px;color: #E8E8E8;font-family: Roboto;position: relative;right: -3px;'>" + item.name + "</div><div class='condition' style='text-align: left;color: #E8E8E8;font-family: Roboto;position: relative;left: 3px;'>" + item.condition + "</div><div class='center-align' style='position: relative;padding:0%;top: -33px;'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea' style='position: relative;top: -129px;background: rgba(0, 0, 0,0.15);display: block;height: 163px;'><div class='buyer-price center-align' style='font-size:22.5px;font-family: Arial Black;color:#E8E8E8'>$" + Math.round(item.price) + "<div class='bitskinscomp' style='font-weight: normal;font-size:12px;font-family: Roboto;font: bold;'>" + message + "</div></div><a class='btn waves-effect waves-light' style='position:relative;left:-5px;top:50px' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light' style='position:relative;right:-5px;top:50px' id='purchaseButton'>Cart</a></div></li>

无效滚动

var perPage = 50;
            function paginate(items, page) {
                var start = perPage * page;
                return items.slice(start, start + perPage);
            }
            var condition = '';

            function renderItems(pageItems) {
                pageItems.forEach(function(item, index, arr) {
                    var message = 'BitSkins Price: $' + Math.round(item.bprice) + '';
                    if (item.price !== null) {
                        if (item.bprice === '') {
                            message = 'Item never sold on BitSkins!';
                        }
                        if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
                            if (item.special == "1") {
                                setSpecialItems(item.id, item.name, item.condition, item.originalname, item.iconurl, item.price, message, item.inspect);
                            } else {
                                $("#inventory").html($("#inventory").html() + "<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:13.5px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 0px;height: 295px;box-shadow: inset 0px 0px 25px 2px #232323;border: 1px solid black' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left;font-size: 14.5px;color: #E8E8E8;font-family: Roboto;position: relative;right: -3px;'>" + item.name + "</div><div class='condition' style='text-align: left;color: #E8E8E8;font-family: Roboto;position: relative;left: 3px;'>" + item.condition + "</div><div class='center-align' style='position: relative;padding:0%;top: -33px;'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/235fx235f'></div><div class='secondarea' style='position: relative;top: -129px;background: rgba(0, 0, 0,0.15);display: block;height: 163px;'><div class='buyer-price center-align' style='font-size:22.5px;font-family: Arial Black;color:#E8E8E8'>$" + Math.round(item.price) + "<div class='bitskinscomp' style='font-weight: normal;font-size:12px;font-family: Roboto;font: bold;'>" + message + "</div></div><a class='btn waves-effect waves-light' style='position:relative;left:-5px;top:50px' href='" + item.inspect + "' target='_blank'>Inspect</a><a class='btn waves-effect waves-light' style='position:relative;right:-5px;top:50px' id='purchaseButton'>Cart</a></div></li>");
                            }
                        }
                    }
                });
            }
            var win = $(window);
            var page = 0;
            renderItems(paginate(items, page));
            win.scroll(function() {
                if ($(document).height() - win.height() == win.scrollTop()) {
                    page++;
                    renderItems(paginate(items, page));
                }
            });

Answer 1

使用有效过滤器，您只隐藏内部div，但不隐藏其父li。我猜他们的填充会导致混乱。尝试将您的代码更改为：

$('#SearchItemsFromList').keyup(function() {
    var valThis = $(this).val().toLowerCase();
    if (valThis === "") {
        // find li not li > div
        $('#inventory > li').show();
    } else {
        // same here
        $('#inventory > li').each(function() {
            // use inner div for text comparison
            var text = $(this).find('> div').text().toLowerCase();
            // this is shorter to show/hide by true/false
            $(this).toggle(text.indexOf(valThis) >= 0);
        });
    }
});

JavaScript搜索系统 - 搜索后未排列的元素

1 个答案: