Last active
January 4, 2016 21:49
-
-
Save dkdndes/8683648 to your computer and use it in GitHub Desktop.
Javascript autolist with search - Online at [Pen](http://codepen.io/dkdndes/pen/FyqEz)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://listjs.com/no-cdn/list.js"></script> | |
| <meta charset=utf-8 /> | |
| <title>Existing list</title> | |
| </head> | |
| <body> | |
| <div id="users"> | |
| <input class="search" placeholder="Search" /> | |
| <button class="sort" data-sort="name"> | |
| Sort by name | |
| </button> | |
| <ul class="list"> | |
| <li> | |
| <h3 class="name">Jonny Stromberg</h3> | |
| <p class="born">1986</p> | |
| </li> | |
| <li> | |
| <h3 class="name">Jonas Arnklint</h3> | |
| <p class="born">1985</p> | |
| </li> | |
| <li> | |
| <h3 class="name">Martina Elm</h3> | |
| <p class="born">1986</p> | |
| </li> | |
| <li> | |
| <h3 class="name">Gustaf Lindqvist</h3> | |
| <p class="born">1983</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var options = { | |
| valueNames: [ 'name', 'born' ] | |
| }; | |
| var userList = new List('users', options); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .list { | |
| font-family:sans-serif; | |
| margin:0; | |
| padding:20px 0 0; | |
| } | |
| .list > li { | |
| display:block; | |
| background-color: #eee; | |
| padding:10px; | |
| box-shadow: inset 0 1px 0 #fff; | |
| } | |
| .avatar { | |
| max-width: 150px; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| h3 { | |
| font-size: 16px; | |
| margin:0 0 0.3rem; | |
| font-weight: normal; | |
| font-weight:bold; | |
| } | |
| p { | |
| margin:0; | |
| } | |
| input { | |
| border:solid 1px #ccc; | |
| border-radius: 5px; | |
| padding:7px 14px; | |
| margin-bottom:10px | |
| } | |
| input:focus { | |
| outline:none; | |
| border-color:#aaa; | |
| } | |
| .sort { | |
| padding:8px 30px; | |
| border-radius: 6px; | |
| border:none; | |
| display:inline-block; | |
| color:#fff; | |
| text-decoration: none; | |
| background-color: #28a8e0; | |
| height:30px; | |
| } | |
| .sort:hover { | |
| text-decoration: none; | |
| background-color:#1b8aba; | |
| } | |
| .sort:focus { | |
| outline:none; | |
| } | |
| .sort:after { | |
| width: 0; | |
| height: 0; | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| border-bottom: 5px solid transparent; | |
| content:""; | |
| position: relative; | |
| top:-10px; | |
| right:-5px; | |
| } | |
| .sort.asc:after { | |
| width: 0; | |
| height: 0; | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| border-top: 5px solid #fff; | |
| content:""; | |
| position: relative; | |
| top:13px; | |
| right:-5px; | |
| } | |
| .sort.desc:after { | |
| width: 0; | |
| height: 0; | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| border-bottom: 5px solid #fff; | |
| content:""; | |
| position: relative; | |
| top:-10px; | |
| right:-5px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment