Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get access to Stackoverflow's auto-suggest tagging system?

Is there anyway to get access to stackoverflow's awesome tagging system? I would like to borrow Stack's awesome auto-suggest and tag mini-explanation boxes for my own site. Obviously, I can use the jQuery UI auto-suggest for tags but I would really like to also include the cool little tag descriptions as well. If not, can someone tell me where all these explanation/descriptions came from so that I can implement a similar system? enter image description here

like image 886
Thomas Avatar asked Jun 18 '12 04:06

Thomas


2 Answers

tageditornew.js

Line 308:

$.get("/filter/tags", {q: a,newstyle: !0}, "json").done(function(c) {
    C["t_" + a] = c;
    StackExchange.helpers.removeSpinner();
    b(c)
})

This might help you out!


It turns out that,

the API url is this:

https://stackoverflow.com/filter/tags?q=STRING&newstyle=BOOLEAN
  •  q - Query text.
  •  newstyle - Require new style or not. Result in new style will be returned in JSON with additional information such as synonyms and excerpt.

DEMO: http://jsfiddle.net/DerekL/bXXb7/ (with Cross Domain Requests jQuery plguin)

For example:

https://stackoverflow.com/filter/tags?q=htm

would give you:

"html|99829\nhtml5|16359\nxhtml|4143\nhtml-parsing|1461\nhtml-lists|1328\nhtml5-video|949"

where 99829 is the amount of questions. It took me 15 minutes looking at the source code to find out this api. -_-"

Putting in javascript in new style gives you this: here

[{"Name":"javascript","Synonyms":"classic-javascript|javascript-execution","Count":223223,"Excerpt":"JavaScript is a dynamic language commonly used for scripting in web browsers. It is NOT the same as Java. Use this tag for questions regarding ECMAScript and its dialects/implementations (excluding ActionScript and JScript). If a framework or library, such as jQuery, is used, include that tag as well. Questions that don't include a framework/library tag, such as jQuery, implies that the question requires a pure JavaScript answer."},{"Name":"javascript-events","Synonyms":"javascript-event","Count":5707,"Excerpt":"Creating and handling JavaScript events inline in HTML or through a script."},{"Name":"facebook-javascript-sdk","Synonyms":"","Count":992,"Excerpt":"Facebook's JavaScript SDK provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, and Dialogs."},{"Name":"javascript-library","Synonyms":"","Count":675,"Excerpt":"A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"javascript-framework","Synonyms":"","Count":563,"Excerpt":"A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"unobtrusive-javascript","Synonyms":"","Count":340,"Excerpt":"Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages."}]

What you can get from there:

  • All tags start with javascript
  • Synonyms
  • Tag counts
  • Nice tag descriptions
like image 76
Derek 朕會功夫 Avatar answered Nov 10 '22 00:11

Derek 朕會功夫


If you're looking for high-level logic, in a nutshell it's just a custom auto-complete that's blazing-fast.

Whenever you type a tag (i.e. a new word or one separated by a space from previous tags), an AJAX request would be made to the server with a JSON object which is then interpreted by the client-side script and presented in the usable layout.

Comparing the autocomplete JSON objects for letter "h" and word "html" should give you enough insight into how this particular implementation works (if prompted, these can be opened with any text editor).

On a somewhat unrelated note: the autocomplete responses have to be fast. Depending on the complexity of the data autocomplete is run against, you may find how IMDb magic search works intriguing.

Update:

Seeing your comment about accessing the content of the tag library, this may in fact be more of a meta question. I struggle to think of a scenario where using an API if any or just the tag library from an external resource would be beneficial to SO - however content here is provided under Creative Commons so you may be able to use it with proper attribution. This does not constitute legal advice :)

like image 26
Oleg Avatar answered Nov 10 '22 01:11

Oleg