【JQuery】维基百科搜索应用

虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通（让撕逼再和谐一点），我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。

简介

下面分享一款自己在初学前端时编写的维基百科词条搜索应用，通过在文本框输入关键词，来获取维基百科中与该关键词相关的若干词条以及他们的简要介绍，并且可以通过点击他们直接跳转到相应的维基百科词条页面。

在这里应用到了维基百科的API，通过AJAX获取到JSONP数据，并展示在页面上，很简单的一款应用，前端初学者可以用来练练手。

截图

输入我偶像的名字，出现了很多关于他的词条

代码

HTML+CSS框架使用的是bootstrap 3，不过这里主要分享一下js部分的代码，使用的是JQuery：

$(document).ready(function() {
    var searchBar = $(".search-bar > input");
    var searchReset = $(".search-reset");
    var searchBtn = $(".search-btn");
    var randomBtn = $(".random-btn");

    //处理小叉叉的出现及隐藏，文本框内有内容时出现，否则隐藏
    searchBar.keyup(function() {
        if ($(this).val()) {
            searchReset.show();
        } else {
            searchReset.hide();
        }
    });

    //点击小叉叉后，搜索文本框以及底下的搜索结果都清空重置
    searchReset.click(function() {
        searchBar.val('');
        $(this).hide();
        $(".result").hide();
    });

    function getData() {
        //从Wikipedia获取数据
        //API地址
        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=";
        //将API地址与搜索词条组合成为获取相关搜索数据的链接
        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);properties
                pgs.forEach(function(page) {
                    var title = results[page].title;
                    var extract = results[page].extract;
                    var pageLink = goLink + results[page].pageid;
                    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();
    
    searchBtn.click(function(event) {
        //阻止冒泡
        event.preventDefault();
        getData();
    });

   //获取随机数范围
    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);
    });
});

相关

想看源代码的童鞋可以来CODING.NET获取，也可以直接去DEMO体验一下。

---

THE END.