基于JQuery及AJAX的维基百科搜索器

这是一个简单的维基百科搜索器，主要功能如下：

1.当搜索框有字符输入时，输入框尾部弹出一个小叉叉，可以重置搜索框（如有搜索结果的话，会顺便清除掉现有的搜索结果）。

2.搜索一个词条，会出现N个搜索结果，这些搜索结果都是与被搜索词条相等或相关的。

3.点击词条，可以去到该词条对应的维基百科页面。

4.有一个随机按钮，点击可以去到一个随机的维基百科词条页面。

HTML代码如下：

<div class="frame">        <h1 class="title">Wikipedia Viewer</h1>        <form class="search-bar">            <span><i class="fa fa-times search-reset" aria-hidden="true"></i></span>            <input type="text" required="required">            <button type="submit" class="search-btn"><i class="fa fa-search" aria-hidden="true"></i></button>            <button type="button" class="random-btn"><i class="fa fa-random" aria-hidden="true"></i></button>        </form>        <section></section>    </div>
*使用到了font-awesome.CSS。
CSS就不放出来了，DEMO链接在文章最后。
JS方面使用到了JQUERY：
$(document).ready(function() {    var searchBar = $(".search-bar > input");    var searchReset = $(".search-reset");    var searchBtn = $(".search-btn");    var randomBtn = $(".random-btn");    //Toggle Reset    searchBar.keyup(function() {        if ($(this).val()) {            searchReset.show();        } else {            searchReset.hide();        }    });    //Execute Reset & Clean Value    searchReset.click(function() {        searchBar.val('');        $(this).hide();        $(".result").hide();    });    function getData() {        //Get Data from Wikipedia        var api = "https://en.wikipedia.org/w/api.php?action=query&PRop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch=";        var getLink = api + searchBar.val();        var html = "";        var goLink = "http://en.wikipedia.org/?curid=";        $.Ajax({            url: getLink,            type: "get",            dataType: "JSONP",            success: function(data) {                var results = data.query.pages;                var pgs = Object.keys(results); //returns array of enumerable properties                pgs.forEach(function(page) { //get every properties for results                    var title = results[page].title;                    var extract = results[page].extract;                    var pageLink = goLink + results[page].pageid;                    //create elements and show'em                    html += "<div class='result'><a href='" + pageLink + "' target='_blank'><h3 class='result-title'>" + title + "</h3></a><p class='result-content'>" + extract + "</p></div>";                });                $("section").html(html);            },            error: function(x,s,e) {                alert(s);            }        });    }    getData();    //Search it!    searchBtn.click(function(event) {        event.preventDefault();        getData();    });    //Get a random page    function RandomNum(Min, Max) {        var Range = Max - Min;        var Rand = Math.random();        var num = Min + Math.round(Rand * Range);        return num;    }    randomBtn.click(function(){    	var curid = RandomNum(10000, 9999999);    	window.open("http://en.wikipedia.org/?curid="+curid);    });});界面如图：
1.开始界面
2.输入任何文本就会跳出的小叉叉
3.搜索结果出现
DEMO在这儿，欢迎来FORK：Wikipedia Viewer