welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

How to implement filter in HTML using JavaScript

By Anshuman Trivedi on 3/7/2017

Ques: How to implement filter(Search) in HTML using javascript? 

Answer: Please follow the steps below:-

            HTML

                <input type="text" class="live-search-box" placeholder="search here" />

                <ul class="live-search-list">

<li>Lorem</li>

<li>ipsum</li>

<li>dolor</li>

<li>sit</li>

<li>amet</li>

</ul>

 

      CSS

 

   .live-search-list {

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

    box-sizing: border-box;

    padding: 1em;

    background-color: #2c3e50;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    font-family: 'Lato', sans-serif;

    color: #fff;

    }

 

    .live-search-box {

                     width: 100%;

                     display: block;

                     padding: 1em;

                    -webkit-box-sizing: border-box;

                    -moz-box-sizing: border-box;

                    box-sizing: border-box;

                    border: 1px solid #3498db;

                    -webkit-border-radius: 5px;

                    -moz-border-radius: 5px;

                    border-radius: 5px;

                     }

 

                    .live-search-list li {

                     color: fff;

                     list-style: none;

                     padding: 0;

                     margin: 5px 0;

                     }

 

               JAVASCRIPT

 

                     jQuery(document).ready(function($){

                     $('.live-search-list li').each(function(){

                             $(this).attr('data-search-term', $(this).text().toLowerCase());

                       });

                      $('.live-search-box').on('keyup', function(){

                                var searchTerm = $(this).val().toLowerCase();

                       $('.live-search-list li').each(function(){

                                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 ||  searchTerm.length < 1) {

                                                $(this).show();

                                } else {

                                                $(this).hide();

                                }

                           });

                       });

                    });

CSS
Javascript
HTML 5
Dynamics CRM
Blog Calendar
Blog Calendar List
2019 Nov  8  1
2019 Jan  23  3
2018 Dec  27  4
2018 Nov  61  3
2018 Oct  12  3
2018 Sep  93  11
2018 Aug  4  2
2018 Jun  11  1
2018 Jan  50  2
2017 Sep  508  5
2017 Aug  16  1
2017 Jul  15  2
2017 Jun  43  2
2017 May  17  1
2017 Apr  31  2
2017 Mar  110  4
2017 Feb  376  4
2016 Dec  174  3
2016 Nov  323  8
2016 Oct  224  10
2016 Sep  354  6
2016 Aug  38  1
2016 Jun  1712  6
2016 May  103  3
2016 Jan  70  2
2015 Dec  385  6
2015 Nov  3  1
2015 Oct  12  1
2015 Sep  1275  6
2015 Aug  12  1
2015 Jul  118  2
2015 Jun  8  1
2015 May  20  1
2015 Apr  21  2
2015 Mar  71  3
2015 Jan  5132  4
2014 Dec  15  1
2014 Nov  2191  4
2014 Oct  75  2
2014 Sep  99  2
2014 Aug  3612  1
2014 Jul  42  2
2014 Apr  2439  12
2014 Mar  274  19
2014 Feb  226  8
2014 Jan  1510  16
2013 Dec  21  2
2013 Nov  625  2
2013 Oct  246  3
2013 Sep  10  1
2013 Aug  30  3
2013 Jul  203  1
2013 Apr  46  6
2013 Mar  1763  10
2013 Feb  292  4
2013 Jan  259  2
2012 Nov  29  2
2012 Oct  420  10
Tag Cloud
Interested in our services? Still not sure about project details? get a quote