Getting Started

Layout

Components

Plugins

Design

Form

CSS Helper

JS Helper

Tools

List

Simple list comes with client-side instant search that filters a list of results based on user input.This component is optimized for searching through modest amounts of data.

Null List

Total Results:

Country Name Number Of Users

Canada 50

United Kingdom 30

United States 40

Spain 40

Italy 40

Russia 20

Netherlands 20

Australia 20

HTML |

        <div class="null-list-container null-box-shadow null-border-radius null-padding-20" id="a1">
              <div class="null-list">

                    <h2 class="null-list-title null-font-size-18">Null List </h2><!--End null-list-title-->

                    <div class="null-list-form-container null-margin-top-10">

                        <div class="null-list-form">

                            <input id="null-list-search-input" type="text" placeholder="Search" />

                        </div><!--End null-list-form-->

                        <div id="null-list-total-results">
                            <div>Total Results: <span></span></div>
                        </div>


                        <div class="null-list-results">

                              <div class="null-list-result-main null-display-flex null-align-items-center null-justify-content-space-between">

                                    <span class="null-font-weight-bold null-color-main">Country Name</span>
                                    <span class="null-font-weight-bold null-color-main">Number Of Users</span>

                              </div><!--End null-list-result-->

                              <div class="null-list-result-no-records-found"></div><!--End null-list-result-no-records-found-->
                                      
                             
                              <!--Start dynamic results-->


                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">Canada</span>
                                <span>50</span>

                              </div><!--End null-list-result-->


                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">United Kingdom</span>
                                <span>30</span>

                              </div><!--End null-list-result-->


                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">United States</span>
                                <span>40</span>

                              </div><!--End null-list-result-->

                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">Spain</span>
                                <span>40</span>

                              </div><!--End null-list-result-->

                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">Italy</span>
                                <span>40</span>

                              </div><!--End null-list-result-->

                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">Russia</span>
                                <span>20</span>

                              </div><!--End null-list-result-->

                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">Netherlands</span>
                                <span>20</span>

                              </div><!--End null-list-result-->


                              <div class="null-list-result null-display-flex null-align-items-center null-justify-content-space-between">

                                <span class="null-list-result-name">Australia</span>
                                <span>20</span>

                              </div><!--End null-list-result-->
                              
                              
                              

                              <!--End dynamic results-->



                        </div><!--End null-list-results-->

                    </div><!--End null-list-form-container-->

                  
              </div><!--End null-list-->
        </div><!--End null-list-container-->

To call this component, simply add a unique ID to the element that has class ".null-list-container" as shown below:

JS |

null_list("#a1");

Want to have an overflow to make the list scrollable? then add the following class ".null-list-results-overflow" to the element that has class ".null-list-results" :