這是一個(gè)簡單的維基百科搜索器，主要功能如下：

1.當(dāng)搜索框有字符輸入時(shí)，輸入框尾部彈出一個(gè)小叉叉，可以重置搜索框（如有搜索結(jié)果的話，會(huì)順便清除掉現(xiàn)有的搜索結(jié)果）。

2.搜索一個(gè)詞條，會(huì)出現(xiàn)N個(gè)搜索結(jié)果，這些搜索結(jié)果都是與被搜索詞條相等或相關(guān)的。

3.點(diǎn)擊詞條，可以去到該詞條對(duì)應(yīng)的維基百科頁面。

4.有一個(gè)隨機(jī)按鈕，點(diǎn)擊可以去到一個(gè)隨機(jī)的維基百科詞條頁面。

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.輸入任何文本就會(huì)跳出的小叉叉
3.搜索結(jié)果出現(xiàn)
DEMO在這兒，歡迎來FORK：Wikipedia Viewer