Wiki Finder Deep trouble

1 
<!DOCTYPE html>
<html>
<body>
<h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Wiki.css">
<script src = "Wiki.js"></script>

<input id="input" type="text" size="40">
<button class="button button1" id = "getSearch" > Search</button>
</input>
<div id="output"> </div>

</h1>
</body>
</html>


//Run some JQuery
$(document).ready(function(){
    //When search is clicked run code
$("#getSearch").click(function(){//button reacts to click
    //get search input
    var input = $('#input').val();// <input> reacts to what is typed.
    console.log(input)
    //complete api
    var html = "https://en.wikipedia.org/w/api.php?action=opensearch&search=lol&format=json&origin=*&srsearch="
    + input; //complete url
    console.log(html);


        $.ajax({
            url:html,
            dataType: 'json',
            async:false,
            type: 'get',
            success: function(data){
                $("output").html('');

                for (var i = 0; i < data[1].length; i++){
                    $("#output").prepend("<div class='jumbotron'><li><a href='"+ data[3][i] + "'>"+ data[1][i] + "</a><p>\n" + data[2][i] + "</p></li></div>");
}
                $("#input").val("");


        },
        error:function(errorMessage){
            alert("Error");
        }
    });

    });
    });

Above is my html and javascript code for the wiki finder. However, i cannot get it to work properly no matter what i do. It keeps giving me the same search result for “lol” no matter what. I’m deeply confused here, and help would be extremely appreciated.

2

I think your problem is here…
var html = “https://en.wikipedia.org/w/api.php?action=opensearch&search=lol&format=json&origin=*&srsearch=”

you’ve set your search criteria “search=lol”. I believe u should use a variable

3

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

I notice a couple of things. First, the input tag is self-closing. I doubt this is causing your problem, but:

<input id="input" type="text" size="40" /> <!-- notice the / -->
<button class="button button1" id = "getSearch" > Search</button>
<!-- remove the closing </input> -->

Second, you’ve hard coded “lol” as your search parameter in your URL.

"...action=opensearch& >> search=lol << &format=json&origin=*&srsearch="
4

Thank you ! No matter how many times i read it, i couldn’t see that lol was hard coded, what a turn of events. I thought i was going crazy!

5

You are absolutely right…thanks for taking the time to find that.

1 Like