How to send search query to jQuery(Wikipedia Project)?

How to send search query to jQuery(Wikipedia Project)?
0

#1

I currently have a search bar for my wikipedia project, but I am unsure how to send the result of a search into jQuery code so that I can search the wikipedia api for the search terms. What is the best way to do this? Any specific examples are welcome.
Thanks!


#2

Whether you are using get or post method, you can use the data parameter in the function(data) like below:

$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

https://api.jquery.com/jquery.post/(https://api.jquery.com/jquery.post/)


#3

So if I have a search bar like this:
http://pastebin.com/qUAJQbfa

Would the corresponding jQuery look like this:

var searchVar = $.get("#search"); // gets plugged into api url

$.getJSON(“http://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&titles=Main+Page&rvprop=content”+ searchVar, function(json) {

$("#result").html(JSON.stringify(json));

});

Would the getJSON work like I think it would with the addition of the searchVar variable that I created?

Thanks![details=Summary]This text will be hidden[/details]


#4

what exactly is your searchVar???

try selecting only value of the input, with val() jquery method, and then send that with rest of the data.
but first you should learn how to make ajax request.


#6

_----------------
The searchVar was supposed to capture the user search input thought I’m realizing now that I should have made it like this: searchVar = $("#search").val(). Would that work like I think?
Here is the jQuery code that I’m using on the project:

$.ajax({

url: 'https://en.wikipedia.org/w/api.php?',
type: 'GET',
dataType: 'jsonp',
data: {
 action: 'opensearch',
 format: 'json',
 search: searchVar,
},
success: function (data) {
 $('p').append(data[3]);
}

});

The only thing is that the function doesn’t seem to be able to see the searchVar and therefore I can’t search without manually hardcoding the search term. How can I get the JSONP request to recognize the stuff I typed into the search bar after I click the search button?
Thanks!


#7

No wonder when your searchVar is the whole div.
You need to select only value of the input and then send that with rest of the data.


#8

I apologize I forgot to mention that I had to make a function to store the user search like I wanted to, and that doesn’t seem to work when it is put inside the JSONP call or when it is outside and I reference the searchVar that is made inside it. What do I need to do to grab the user search and then put it inside the JSONP call?
Here is the code I’m referring to:

(The part that gets the user search :

$(document).ready(function(){

$(’#initSearch’).click(function() {
var searchVar= $(’#userText’).val();

console.log(searchVar);

});

});

The JSONP part :

$.ajax({
url: 'https://en.wikipedia.org/w/api.php?’,
type: ‘GET’,
dataType: ‘jsonp’,
data: {
action: ‘opensearch’,
format: ‘json’,
search: searchVar,
},
success: function (data) {
$(‘p’).append(data[3]);
}
});

Thanks for the help!


#9

var searchVar is inside of click event function so you need to place your ajax code inside too.
right below that variable. Hope it helps =)


#10

Just tried it, and it works! Thanks!!! Now that I have the search working and results are coming up, what is the best way to separate the url’s and store them for display?
Thanks again!


#11

Probably with for loop or each() method.