DEMO: Wikipedia Search
Wikipedia pretty much replaced all encyclopedias. I remember growing up seeing commercials on TV for the latest set of encyclopedias for sale, which later on went to become encyclopedias on CD-ROM. By the time I was in college, Wikipedia became a common household name and was synonymous with writing final research papers.
Just for the crowd that doesn’t already know; Wikipedia is a collection of encyclopedia entries put together through the contributions of users from around the world. It’s also an amazing, open source collection of images, sounds and information that can freely be shared and used for many things.
Wikipedia is, in one word, awesome.
Without Wikipedia, I’m sure we would all know a little less about the world.
For this project, I decided to build a streamlined Wikipedia search interface. Graciously, Wikipedia does provide a free and open API for anyone to use. The API and its documentation is presented one page and very easy to navigate.
Check out the Wikipedia API here.
APIs are a developer’s best friend. Well, it is to me at least!
Having access to APIs to build applications is like having super powers.
Have an idea for an app? Chances are you will benefit from an API out there.
Wikipedia’s API is pretty simple. If you look up the documentation, it’s just a URL that you modify to include a search term of choice. Concatenate the search term into the URL and you pretty much retrieve the first ten items that match that search term.
It can’t be any simpler than that.
To make this search intuitive and easy, a text input box is provided to accept a search value from the user. This is assigned as the variable searchTerm. The value is then concatenated into the Wikipedia API url and placed into an AJAX call.
Unlike a $.getJSON call, an AJAX call has a lot more options and capability. It can do more than just send a “get” request and it provides a developer options to handle errors in the event that the API call is unsuccessful. AJAX calls also provide a place to insert an API Key if you have one.
For this project, the request is a GET request and the data coming back is in JSON format. As with all JSON formats, the data is nested in an object-like fashion (JSON and objects are not the same thing!) and can be accessed in dot or bracket notation.
Since Wikipedia’s API automatically sends back the top ten matching results, we simply loop through the entire object as one item (data) and append each item into a container with the id of “output”. The code is also written to return the data with the URL set as an active hyperlink for users to click on.
Note: Without looping through the data, you won’t be able to access all the results that are returned from the AJAX call. Looping ensures that you are receiving all the data that is provided back to your AJAX call.
Upon completion of populating the results, the search bar (text input bar) returns to the value of just “” or simply nothing. This essentially resets the text input for a new search whenever the user is ready.
There is also a simple error handling message of alerting the user (or developer) that there is an error if the API request fails.
I also don’t like clicking on buttons after completing a form or search bar, so I felt it would be nice to have the option to hit “enter” after filling it out and seeing results immediately. For this, I simply had and event handler set up in jQuery to wait for a keypress matching key 13, otherwise known as the “Enter” key. Upon this event, the event handler will trigger the search as if you had clicked on the “Search” button.
One thing I do want to note before I wrap this up is that the request is coming from an unsecured HTTP source. Browsers like Google Chrome will not allow cross-origins (or the use of one source from HTTPS and another from HTTP) sources in the same application. It’s a bit of a pain in the butt, but preventing Cross-Origins Resource Sharing (or CORS) is actually a good thing! It’s built to provide an extra layer of protection for users, preventing unsecured or unwanted resources from downloading onto your program or application and doing anything malicious.
To remedy this issue, jQuery has something built-in called JSON or JSON Padding. JSONP is a way to bypass the CORS issue by simply adding on &callback=? to the end of your API URL. JSONP makes this work because same-original policies aren’t enforced on script tags. This is great for when you don’t want to find other complicated solutions to get your application up and running… however, you will have to implement jQuery into your code or else you can kiss this solution goodbye.