JQuery - Search function Architecture Problem (Wikipedia Viewer)

#1

Hello world! :slight_smile:

I am working on the Wikipedia Viewer (it seems all projects with APIs are not as easy as they seemed).

I can understand the logic of independent jquery commands, though I think why I am getting stuck is because of my lack of knowledge around code architecture. I mean it would be much more helpful to know the steps and some specific elements I can use before building something. Otherwise as it seems that everyone is doing, all follow a totally different approach and for those who are getting started it seems like hell!

This time I have a problem with the Search Architecture, I got stuck just before finishing this… so this is my code since now. I have no idea how to get the results from the autocomplete or the input field and by clicking to go to the wikipedia link. I found by luck that the data[3] gives the url but open.window as it seems doesnt work in codepen.

$(document).ready(function () {
  
var input = $('input');
var button = $('#search');
var toSearch = '';
var searchUrl = 'https://en.wikipedia.org/w/api.php';

input.autocomplete({
    source: function (request, response) {
        $.ajax({
            url: searchUrl,
            dataType: 'jsonp',
            data: {
                'action': "opensearch",
                'format': "json",
                'search': request.term,
		    'limit': 6
            },
            success: function(data){
            response(data[1]);
		toSearch = data[1]; 

		$("#search").click(function(data){
		var link = data[3]
		$(link).open.window;
		});
	}
});
}
});

});

*My pen (https://codepen.io/DivergentBilly/pen/RgxKrE)

Could someone be so kind to help me with this? Also a reference to coding architecture which would be newbie friendly and not a book could be great!

Thank you!

#2

The autocomplete widget emits its own events on actions like closing, opening, or selecting the menu. It’s dead simple. Check out the documentation for more on that http://api.jqueryui.com/autocomplete/#event-change

You don’t have any issues with the architecture of your code since you’re just doing one thing. When you feel like it, you should take some free courses online that walk you through topics like code patterns and object creation.

https://classroom.udacity.com/courses/ud989
https://classroom.udacity.com/courses/ud015

1 Like
#3

Cool! :smiley: I think these are just what I needed!!
JavaScript Design Patterns seem very interesting! :slight_smile:
Thank you man!

#4