Adding Search Feature to Swagger

[Zack Herbert]

I am currently trying to develop a search feature to add to the swagger ui for my internship. I have discussed this with some people on the IRC chat and some of them don't understand the necesity for one. Honestly I like the way that swagger ui is designed now but the extra functionality wouldn't hurt in my opinion either. On top of that it was requested by my team to create this feature. Some of you might be thinking why don't you just use Ctrl+F to search the api for a keyword. The problem with that is if the api's are collapsed ctrl+F doesn't work except on the tag name. Another reason why a search feature would be nice is the fact that you could have 50+ Api's and you would possibly have to search each one for the word you are looking for. This takes time and is inconvenient. The search feature that I want to develop will be a simple search bar that you type key words into and if those key words are anywhere in the api documentation (path name, tag, param name, etc.) those will be shown while the others are completely hidden from the user. Can anyone point me in the right direction to start implementing such a feature? My biggest road block right now is the fact that alll of the JS is dynamically created with Handlebar Templates and I don't fully understand how this is being done. 

[Josh Ponelat]

Hey Zack,

I'm glad you're going to tackle a search feature, I love keyboard bashing and a search bar makes a good victim.

So you might need to brush up on Backbone (its relatively simple structure of javascript apps) It uses MVC ( I hope you're familiar with the acronym - model-view-controller) pattern.

Take a look around at implementing a filtered search bar in backbone.js, someone must have done something with like that it the great internet.

Once you have a rough idea on how it might be implemented (or even during, if you're like me and impatient) you can look at the structure of swagger-ui.

It's not a friendly place, so take care not to get lost. It's in need of an overhaul, but as it's relied on by quite of few people, thing have to be done slowly.

It might be a bigger challenge than one would initially think. Perhaps you can start by adding to an existing feature.

There is an apiSorter function, which sorts the apis. You could start with the search bar, that on change it would change the function and re-render the views.

We'll be here to help where we can (ron always has wisdom, if not Javascript prowess)

On 15 July 2015 at 19:44, Zack Herbert <zackh...@gmail.com> wrote:

I am currently trying to develop a search feature to add to the swagger ui for my internship. I have discussed this with some people on the IRC chat and some of them don't understand the necesity for one. Honestly I like the way that swagger ui is designed now but the extra functionality wouldn't hurt in my opinion either. On top of that it was requested by my team to create this feature. Some of you might be thinking why don't you just use Ctrl+F to search the api for a keyword. The problem with that is if the api's are collapsed ctrl+F doesn't work except on the tag name. Another reason why a search feature would be nice is the fact that you could have 50+ Api's and you would possibly have to search each one for the word you are looking for. This takes time and is inconvenient. The search feature that I want to develop will be a simple search bar that you type key words into and if those key words are anywhere in the api documentation (path name, tag, param name, etc.) those will be shown while the others are completely hidden from the user. Can anyone point me in the right direction to start implementing such a feature? My biggest road block right now is the fact that alll of the JS is dynamically created with Handlebar Templates and I don't fully understand how this is being done. 

--
You received this message because you are subscribed to the Google Groups "Swagger" group.
To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Zack Herbert]

Thanks Josh I really appreciate it.

[Zack Herbert]

So I have some more questions/information regarding the search feature. My team would like me to use AngularJS to implement the filter search feature because that is what they typically use as a JS framework, not backbone. Since the HTML is dynamically created through Swagger-ui.js using Backbone (this is an assumption correct me if I am wrong) I am confused as to how I would use the AngularJS directives and such to get this to work. Would putting the Angular directives etc. in the ui.js where the HTML is being created cause any problems? I am just confused on all this so any direction would help. I am willing to use backbone if i have to and they approve it, but i would need the unminified version of the backbone file.

 

I am also going to put some seudo code here to help explain what I would like the feature to do.

 

if(!keyword.inJSON/DOM)
{
   hide(div)
}

I know its a lot more complicated than that looks. Essentially user would type in a keyword to search for. If that keyword is in the JSON/DOM(haven't decided what we want to look at yet) we want to hide any method, path, param, etc. that doesn't have the "keyword" in the api.

[Ron Ratovsky]

Hi Zack,

Someone else came into the IRC channel yesterday asking exactly for the same feature. I've referred him to https://github.com/swagger-api/swagger-ui/issues/1096 as well and he commented there.

Perhaps you'd want to join forces to make it happen.

--

You received this message because you are subscribed to the Google Groups "Swagger" group.
To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

-----------------------------------------

http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

[Josh Ponelat]

Hey,

Also, AngularJS is an entire framework - it's a nice one, but its big and not suited for small additions :D

I'm facing the issue of embedding an Angular app inside a another framework... its a little messy :D

I may have gone off the railing a little earlier, you could do this with straight up jQuery..

This filddle will show you one way..http://jsfiddle.net/itsokaychill/aksgqyz1/

You might not need to know much about the internals of swagger, you can just filter the DOM (what you get on the page)

If that's the case you don't even need to work with Backbone, you can add vanilla javascript to the src/main/html/index.html page. By adding a script, then invoking it inside index.html page

--

[Zack Herbert]

Ok we have decided to go with jquery. Where would you suggest we make the fucntion call in the html so that it is called after the entire dom has been rendered? and do we use onLoad or onReady?