Best way to implement an Attribute-Value search interface using javascript - javascript

I am looking to implement an Attribute-Value search interface for my backend; somewhat like AWS - EC2 search as shown in the linked gif below.
http://i.imgur.com/KDf7Cqg.gifv
Are there any existing implementations in javascript that I can use as a reference?
Edit: I've looked at select2 but it only takes tags.

Tag-it seems like a good place to start.
Edit: I've found the exact solution I was looking for. It's called visual search by Document Cloud

Related

How to get jsdoc generation for parms of class methods that use arrow functions?

I'm a student who's capstone project/work intergrated learning is about to end. I'm working on producing technical documentation to hand off to the next team that will continue on with this work, but I've hit a snag.
My class methods that use arrow functions aren't generating params documentation when I create documentation using the jsdoc tool.
i.e.:
becomes
The documentation works as intended in visual studio code/intellisense:
I've been googling around to try and figure out what the problem was, but I failed to find anything.
I mean, my research yielded:
Outdated way to make vscode play nice with arrow function
syntax: (https://github.com/Microsoft/vscode/issues/36283) (https://github.com/Microsoft/vscode/issues/22264) ((This one is the actual issue where the support was added) https://github.com/microsoft/TypeScript/issues/14134)
Outdated info on the jsdoc support for this feature:
https://github.com/jsdoc/jsdoc/issues/1310
etc., etc., again, nothing useful.
Of note is that I'm using the jsdoc-export-default-interop plugin so that jsdoc will actually generate things for export default [CLASS OR FUNCTION].
I've found a solution that fits my requirements
However, while it is good enough for my purposes, I'm not entirely sure it's acurate and would be happy to hear critisims, other people's viewpoints and solutions. I'll explain the concerns I have at the end.
The problem: It looks like jsdoc cannot automatically detect if a member assignment is a function when parsing.
I have no idea why VSCode is able to detect it automatically, but it appears the JSDoc tool cannot. Here it is stated in the official documentation
Link to documentation: (https://jsdoc.app/tags-function.html)
The solution: Document the member with the #function tag (or an alias like #method).
By documenting the class member with the #function tag like so:
I am able to get the arrow function to generate as a class method, and get params documentation:
My concerns
Well the biggest concern/annoyance is now I need to go through all the source code and add a bunch of #function tags. Ah whelp.
Other concerns are that I may have misunderstood the problem/I'm not quite sure if this is best practice.
And I'm not too certain if this documentation is accurate in terms of if there is actually a tangible difference between a class member arrow function and a class method that I need to capture in the API documentation.
Anyway, I think this will be what I go with, but I'll be monitoring this answer to read any input/feedback :)

Extracting a specific set of values out of an HTML table

I'm in the process of teaching myself Javascript and I'm having a little trouble understanding something.
I'm trying to extract every one of the "Title" and "Instructor" values from this class registration page to make an enhanced scheduling tool for myself. However, in the examples I'm looking at, they all use the "getElementsByClassName(class)" and "getElementsById(id)" to extract specific information from an HTML table. When I look at the page source in chrome, I am not able to find either a unique class name or id to specify in these calls.
Would someone mind pointing me in the right direction? Am I using the page source code correctly or is there a better way of doing things?
EDIT: Here's the html of the page in question
view-source:https://admin.wwu.edu/pls/wwis/wwsktime.ListClass
You can use querySelectorAll to use CSS selectors.
document.querySelectorAll("tr>td:nth-child(3)") and document.querySelectorAll("tr>td:nth-child(8)") will give you all Title and Instructor elements
Here's a jsfiddle of it https://jsfiddle.net/n1fuo87p/
No you're not really doing anything wrong, but unfortunately the creators of the web page haven't made use of classes and ids in a way that will make them useful to you.
I'd recommend creating a Google Sheet to import the table. (See the importHTML function in Google sheets.) Then I'd retrieve the data as JSON and work with it that way. IMO you'll learn more valuable skills working with JSON than you will parsing HTML too. This article will take you through getting JSON out of your Google sheet: http://ctrlq.org/code/20004-google-spreadsheets-json

Jquery plugin Vs javascript

Can somebody please explain the pros and cons for below.
Am having a function to get the url querystring parameters, but I need to know which is the best way to write the function. Eg: if i create the function using jquery plugin style, then every time I need to use a target element to access the function as below
$("#targetDom").getQueryString("name");
However, if I create the function using javascript classes or javascript design pattern, it would be
getQueryString("name");
This is a small example but considering large application which approach is best? is there any disadvantage in going with jquery plugin way?
Regards,
Navin
I found a while ago this sentence:
Don't learn jQuery. Just use it.
It's one of the best advices for a newbie, I think.
jQuery is just an addition to javascript. It simplifies DOM traversing/manipulation, makes easy event handling and so on, but it is not something you should start learning before you know vanilla Javascript.
Regarding your example, it is not the best thought example for jQuery plugin.
The syntax you suggested ($("#targetDom").getQueryString("name");) implies that you treat URL query string as attached somehow to the HTML element, which is wrong...

Django template implementation in javascript?

Does anyone know about an extensible django template implementation in javascript. I don't need all the advanced features, but loops, tags and filters would be nice.
I found a few projects/hacks just implementing the variable style but that's not enough for us.
The one that came closest is: http://code.google.com/p/jtl-javascript-template/ but it's not very well written/complete/maintained.
Check this : http://icanhazjs.com/
And here how it can work with django : http://tothinkornottothink.com/post/4282971041/using-jquery-templating-icanhaz-js-with-django
Another option is to use mustache.js and pystache. It would require some changes as the feature set isn't as powerful as Django templates but it does provide fair amount of freedom.

search engine for javascript or / and css by source code snippets

this is not a programming question as such but still...
does anyone know of a service / spider / crawler that can fetch javascript or CSS resources embedded through standard methods (or lazy loading, whatever it can cope with)
practical use for it: search for a unique piece of code from a class or function you've written and get a list of sites that reference it. or, for that matter, search for something unique out of framework and get an idea of its popularity.
http://www.dreamincode.net/code/browse.php?cid=11
and
http://www.dreamincode.net/code/browse.php
Its providing free....
http://www.astahost.com/info.php/free-code-snippets-css-layout_t13198.html
http://www.koders.com/ and http://www.google.com/codesearch ?

Categories

Resources