Question

我有300多个项目列表，我希望用户能够更轻松地找到他们想要的内容。我希望包含与用户键入的内容匹配的元素移动到列表的顶部或顶部的另一个元素。我的代码如下所示。关于如何实现这一目标的任何想法？

＆＃13;

var $showYourself = $('.sort-plate').text;
    var $rollCall = $('input#sort-plate').text;

    $('#clicker').click(function () {
        if ($showYourself === $rollCall) {

            $('.sort-plate').appendTo('#show-here');

        }

    });



$(function () {

    $('.name').html(function (i, html) {

        return $.trim(html).replace(/(\w+)$/, '<span class="sort-by">$1</span>');
    });

    var $sortPlate = $("#plate");
    $sortPlate.find(".sort-plate").detach().sort(function (a, b) {
        return $(a).find('.sort-by').text().localeCompare($(b).find('.sort-by').text());
    }).appendTo($sortPlate);

});

＆＃13;

.name, .center, .phone {
    width: 190px;
    font-size: 16px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
    <from action="#">
        <input type="text" id="sort-plate" />
        <input type="button" id="clicker" value="submit" />
        <div id="show-here">Resul</div>
        </form>
        <br />
        <br />
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angelina Jolie</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Michael Jordan</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Deka Junior</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angela Jones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Ikechukwu Adaora</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
</div>

＆＃13;

Answer 1

如果您不介意区分大小写，可以使用:contains()选择器。有点像：

    $('input[type=button]').click(function () {
        var value = $('input#sort-plate').val();

        var match = $(".name:contains(" + value + ")");
        if (match.length) {
            $(".sort-plate").first().before(match.first().parent());
        }
    });

要获得不区分大小写的匹配，您需要自定义过滤器，并且可以在原始输入上收听keyup：

    $('input#sort-plate').keyup(function () {
        var value = $('input#sort-plate').val();

        var match = $(".name").filter(function() {
            // don't do this -> return $(this).text().match(new RegExp(value, "i"));
            return $(this).text().toLowerCase().indexOf(value) !== -1;
        });
        if (match.length) {
            $(".sort-plate").first().before(match.first().parent());
        }
    });

您可能希望对值进行一些预过滤，否则您可能会从new RegExp构造函数中获得意外结果

修改：此问题有更好的匹配方式，而不使用RegExp：JavaScript: case-insensitive search

    var $showYourself = $('.sort-plate').text;
    var $rollCall = $('input#sort-plate').text;

    $('input[type=button]').click(function () {
        var value = $('input#sort-plate').val();

        var match = $(".sort-plate:contains(" + value + ")");
        if (match.length) {
            $(".sort-plate").first().before(match.first());
        }
    });



$(function () {

    $('.name').html(function (i, html) {

        return $.trim(html).replace(/(\w+)$/, '<span class="sort-by">$1</span>');
    });

    var $sortPlate = $("#plate");
    $sortPlate.find(".sort-plate").detach().sort(function (a, b) {
        return $(a).find('.sort-by').text().localeCompare($(b).find('.sort-by').text());
    }).appendTo($sortPlate);

});

.name, .center, .phone {
    width: 190px;
    font-size: 16px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
    <from action="#">
        <input type="text" id="sort-plate" />
        <input type="button" value="submit" />
        <div id="show-here">Resul</div>
        </form>
        <br />
        <br />
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angelina Jolie</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Michael Jordan</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Deka Junior</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angela Jones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Ikechukwu Adaora</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
</div>

Answer 2

这看起来像你想要使用库的东西。既然你没有使用表格（这通常是可排序和可搜索数据的方式），而是某种“排序板”，我最近遇到了这个库，这可能正是你正在寻找的： http://isotope.metafizzy.co/

将包含用户条目的元素追加到列表顶部

2 个答案: