List.JS не делает ничего заметного

Я пытаюсь настроить list.JS на существующий список на моей странице. Это упрощенная версия того, с чем я пытаюсь работать

<html>
<head>
</head>
<body>
<div id="list-container">
    <input class="search" placeholder="Search">
    <button class="sort" data-sort="name">
        Sort by name
    </button>
    <ul class="buisList">
        <li class="even" id="1">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">Century 21</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">Century 21 Real Estate LLC is an American real estate agent franchise company founded in 1971. The System consists of approximately 6,900 independently owned and operated franchised broker offices in 78 countries and territories worldwide with over 101,000 sales professionals.</span></a></div>
        </li>
        <li class="odd" id="2">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">Michaels</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">Michaels Stores, Inc. is an arts and crafts retail chain. It currently operates more than 1262 stores (consisting of 1,145 Michaels stores in the 49 states and Canada and 118 Aaron Brothers stores) as of May 31, 2014.</span></a></div>
        </li>
        <li class="even" id="3">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">GameStop</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">GameStop is an American video game, consumer electronics, and wireless services retailer. The company is headquartered in Grapevine, Texas, United States and operates 6,457 retail stores throughout the United States, Canada, Australia, New Zealand, and Europe.</span></a></div>
        </li>
        <li class="odd" id="4">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">eBay Inc.</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">eBay Inc. is an American multinational corporation and e-commerce company, providing consumer to consumer &amp; business to consumer sales services via Internet.</span></a></div>
        </li>
        <li class="even" id="5">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">Bank of America</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">Bank of America is an American multinational banking and financial services corporation headquartered in Charlotte, North Carolina. It is the second largest bank holding company in the United States by assets.</span></a></div>
        </li>
    </ul>
</div>

<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'desc' ]
    };

    var newList = new List('list-container', options);
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
</body>
</html>

Я просмотрел пример кода, предоставленного на их веб-сайте, и думаю, что я правильно следую инструкциям... но затем, когда я пытаюсь взаимодействовать либо с полем ввода, либо с кнопкой "Сортировать по имени", ничего не происходит.

Есть идеи?

Источник

1 ответ

List.js должен знать класс, который вы используете в контейнере списка. Это сработало для меня:

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'desc' ],
        listClass: 'buisList'
    };

    var newList = new List('list-container', options);
</script>

Полная страница здесь: http://codepen.io/anon/pen/eNQaOg

Источник
Другие вопросы по тегам