aNzrwm

aNzrwm.markdown

aNzrwm

A Pen by Ben Grosser on CodePen.

License.

index.html

<form method="get" id="search">
  <input type="text" class="searchbox" value="Search Wikipedia..." onblur="if(this.value == '') { this.value = 'Search Wikipedia...'; }" onfocus="if(this.value == 'Search Wikipedia...') { this.value = ''; }" name="s">
  <button type="submit">Submit</button>
</form>

script.js

$(".searchbox").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://en.wikipedia.org/w/api.php",
            dataType: "jsonp",
            data: {
                'action': "opensearch",
                'format': "json",
                'search': request.term
            },
            success: function(data) {
                response(data[1]);
            }
        });
    }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

styles

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />