TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

List.js

441 pointsby bloodberetover 13 years ago
6.899kb cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable

28 comments

cletusover 13 years ago
One note--and this applies to <i>every</i> Javascript plugin or library:<p>Your examples need to be online. Without exception.<p>As soon as I have to download and run local examples, honestly I just completely lose interest. That may seem impatient, a snap judgment, arbitrary and irrational. It is in fact all of these but it doesn't matter.<p>There's no reason you can't have your demos online. It makes it super easy for anyone to check out.
评论 #3136317 未加载
评论 #3137032 未加载
评论 #3136594 未加载
thegorgonover 13 years ago
So, one thing I don't quite understand: If I have jQuery on my page (which I imagine now at least 50% of websites do, though that's just a guess) why would I want to add another script that redefines a bunch of jQuery functions? If you had a jQuery compliant version, wouldn't it be smaller, faster, better?
评论 #3136279 未加载
Groxxover 13 years ago
Why do so many JS mini-libraries expect an ID or a CSS selector? Why not accept an element too, which lets you augment <i>anything</i>? Seriously, you're just crippling your library, and <i>adding</i> complexity by not accepting elements.
评论 #3137567 未加载
rgarciaover 13 years ago
I'd like to see something like this for Backbone collections, e.g. it would take a query on model attributes and generate a subset of the original collection. Then any views (not just lists) tied to this subset would update automatically.<p>In fact I think with _.fiter() you could probably do this in a few lines.
评论 #3136816 未加载
评论 #3136402 未加载
评论 #3136604 未加载
latchover 13 years ago
kinda neat...but...you need to read: <a href="http://contrastrebellion.com/" rel="nofollow">http://contrastrebellion.com/</a><p>and redesign your site...easily the biggest violation of my eyes ever.
评论 #3135921 未加载
评论 #3136255 未加载
评论 #3136100 未加载
评论 #3136669 未加载
评论 #3135600 未加载
评论 #3135316 未加载
评论 #3135489 未加载
josscrowcroftover 13 years ago
What search algorithm are you using for the list searching?<p>I tried [monkey game] and would have expected Monkey Island to show up.<p>Also, clicking 'edit' I would expect the table row being edited to be edited inline (it's confusing that the focus jumps down to the input boxes)<p>Potentially really useful but needs a bit of polishing I think - great work though.
评论 #3135542 未加载
ak217over 13 years ago
Thanks, but you <i>really</i> need to change that to 7 KB. I thought to myself "7 MB? What a weird JS library" and was about to close the page.
评论 #3135702 未加载
ayuover 13 years ago
Good complement to Chosen, which gives you improved &#60;select&#62; elements. <a href="http://harvesthq.github.com/chosen/" rel="nofollow">http://harvesthq.github.com/chosen/</a>
orblivionover 13 years ago
Maybe it's just me, but it took me a second to figure out what I was looking at. "HTML Lists" didn't pop out at me right away as specifically meaning &#60;ul&#62; and &#60;ol&#62; for some reason. You should put the source code by your examples so people see what little they put in for the output they see, and it'll clarify (at least to someone like me) exactly what is going on here.<p>EDIT: I see now that your front page is an example, with source code. That wasn't obvious to me.
评论 #3135777 未加载
DanielRibeiroover 13 years ago
Looks a lot like quicksand[1] without any of the fancy effects. Or am I missing something?<p>[1] <a href="http://razorjack.net/quicksand/" rel="nofollow">http://razorjack.net/quicksand/</a>
评论 #3136080 未加载
yoda_slover 13 years ago
What is the license behind the script ? Apache ? MIT ? Other?
评论 #3136352 未加载
rdgover 13 years ago
Also... 6.899kb is confusing. In many countries/locales(?) that would mean almost 7MB. Maybe 6.9kb should be used instead, or 6899bytes or something like that.
评论 #3135360 未加载
评论 #3135439 未加载
stragerover 13 years ago
I only realized there were examples on the front page after visiting HN. They're completely below the fold for me (1440x900).<p>The examples page had a similar problem. The examples (pretty close to the fold) looked like comments. I went to read the comments, seeing if anyone had suggested live examples be put on the site.<p>The contact list example won't let me add contacts if I click "edit" on one row, then delete that row. The table also seems to degrade if you remove all elements.<p>"Documentation" and "Source" link to the same (Github) page. At least link to README.md for the documentation. Why is the "Download" link bold?<p>The front page has <i>no</i> indication of the name of this library above the fold.
评论 #3136000 未加载
foresterhover 13 years ago
This looks pretty useful. I'm curious why you used class to store the "category". Wouldn't it be cleaner to store it in"data-category" or just Javascript? Or is that less browser compliant?<p>Overall a great script though.
评论 #3135578 未加载
andreasklingerover 13 years ago
We would use such a JS file for large lists.<p>Is there a performant way to use this kind of JS files without loading the full database table into the frontend? I couldn't find anything in the documentation.
评论 #3135400 未加载
评论 #3136579 未加载
peterhajasover 13 years ago
Thank you for licensing this - when I checked earlier, it was "I'll figure it out", but thank you for putting it under an open source license.<p>Nice stuff!
shyamsterover 13 years ago
Very cool script. Any support for permalinks? &#60;plug&#62; If you don't need your list to be on your site, you can always use listly for social lists/polling like this example of startup tools - <a href="http://list.ly/list/9E-tools-and-services-for-a-lean-startup" rel="nofollow">http://list.ly/list/9E-tools-and-services-for-a-lean-startup</a> &#60;/plug&#62;
jpdoctorover 13 years ago
Regarding the examples: Does anyone have a quick readout whether the "edit" button could cause edit-in-place behavior?
jroseattleover 13 years ago
This is more in the aggregate, but what is considered best practice when loading JS scripts in a page in terms of sum-total size?<p>This script (looks cool, btw) comes in at 7k. It seems very easy to me to add "7k here, another 7k there" and next thing you know your page needs to go on a diet.<p>Question is: what's the threshold that everyone follows?
评论 #3135934 未加载
Smudgeover 13 years ago
An idea for extending this:<p>-Add pagination. I don't mean dynamic/AJAXed pagination -- The entire list can still be loaded in the background (which would still make the list sorting/filtering possible).
tomeldersover 13 years ago
perfect, and just in time. I'll be announcing my own project here on HN in a week or two, and List.js will most certainly be taking a very central role.<p>So nice work, and thanks.
评论 #3137580 未加载
atomicalover 13 years ago
Is there a similar library that can be used with tables? I like the function and this looks easy to use but my site uses tables over lists.
评论 #3138065 未加载
评论 #3135552 未加载
评论 #3135544 未加载
评论 #3136925 未加载
reposover 13 years ago
Is there a neat collection of all these javascript libraries out there?<p>I'm sure there are tons of awesome libraries I don't know about.
评论 #3139600 未加载
s00pcanover 13 years ago
Seems this has regex support, but I don't see any mention of it anywhere. Try it out.
aboodmanover 13 years ago
Put a working example or at least a screenshot on that first page. I don't have time to download a zip file and blah blah blah to see what you made. Make it easy.
评论 #3135769 未加载
评论 #3137070 未加载
评论 #3135768 未加载
ckhooover 13 years ago
Fantastic script. Nice work!
sundar22inover 13 years ago
Its neat and useful.
ecommandoover 13 years ago
Nice work :)