通过英文维基的免费API，可以实现对维基百科的搜索查询或者标题全文查询等，尝试了一下通过title实现全文查询，返回的结果是wikitext格式，暂时不知道该如何应用，所以仅实现了查询功能，可以返回最接近的10条信息的标题、摘要、图片及链接。

我的DEMO页：https://zhangcuizc.github.io/My-FreeCodeCamp/

如下图：

搜索结果：

HTML如下：

<!DOCTYPE html>

<html>

<head>

    <title>wikisearch</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <link rel="icon" href="icon.ico">

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/main.js"></script>

</head>

<body>

    <div class="logo">

        <img src="enwiki.png">

    </div>

    <div class="searchbox">

        <div class="searchbar">

            <input type="text" name="searchcontent" value="" placeholder="search content" class="inputbox">

            <button class="searchbtn">Search</button>

        </div>

        <div class="searchresult">

            <ol>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

                <li>

                    <h3><a href="" target="_blank">loading……</a></h3>

                    <p><img src=""></p>

                    <div class="clearfix"></div>

                </li>

            </ol>

        </div>

        <div class="clearfix"></div>

    </div>

</body>

</html>

CSS就不贴了，JS如下：

$(function(){

    (function(){

        var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&origin=*&gsrsearch=';

        // search函数，通过AJAX/wikiAPI得到响应信息

        function search(url){

            $.ajax({

                url: url,

                success:function(response){

                    // 获取响应信息中的pageid

                    var x=[];

                    for (var pageid in response.query.pages) {

                        x.push(pageid);

                    }

                    // 得到每个pageid的信息，包括搜索标题，摘要，链接，图片等

                    $(x).each(function(index, el) {

                        var page=response.query.pages[x[index]];

                        var title=page.title;

                        var extract=page.extract;

                        var imgsrc="";

                        try{

                            imgsrc=page.thumbnail.source;

                        }catch(e){}

                        var listcontent="";

                        if(imgsrc){

                            listcontent="<img src='"+imgsrc+"'>";

                        }

                        listcontent+=extract;

                        var href="http://en.wikipedia.org/wiki/"+encodeURIComponent(title);

                        var list=$(".searchresult ol li").eq(index);

                        list.find('a').text(title).attr('href', href);

                        list.find('p').html(listcontent);

                    });

                }

            });

        }

        // 点击搜索按钮后触发

        $(".searchbtn").click(function() {

            var searchwhat=$(".inputbox").val();

            if(searchwhat&&searchwhat!=="please input something"){

                var searchurl=url+searchwhat;

                search(searchurl);

                // 动画效果

                $(".logo img").fadeOut();

                $(".searchbox").animate({marginTop:"5px"}, 400,function(){

                    $(".searchresult").animate({height:"show"}, 600);

                });

            }else{

                $(".inputbox").val("please input something").trigger('focus');

            }

        });

        // 文本框获得焦点后触发

        $(".inputbox").focus(function() {

            $(this).select();

            $(".searchbox").animate({marginTop:"300px"}, 400 ,function(){

                $(".logo img").fadeIn();

            });

            $(".searchresult").stop(true,true).animate({height:"hide"}, 600);

        }).keyup(function(event) {

            // 按回车触发搜索

            if (event.keyCode==13) {

                $(".searchbtn").trigger('click');

                $(".inputbox").blur();

            }

        });

    })();

});

关键点还是在于维基的API，关于维基API的信息，可以查看：

API:Main page以及API:Query/zh

我的DEMO页：https://zhangcuizc.github.io/My-FreeCodeCamp/

通过维基API实现维基百科查询功能的更多相关文章

PHP调用API接口实现天气查询功能
天气预报查询接口API,在这里我使用的是国家气象局天气预报接口使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式根据地名查询各城市天气 ...
【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...
ArcGIS api for JavaScript 3.27 FindTask查询功能
在ArcGIS API中查询功能是经常使用的,常用的三个查询分别是FindTask,QueryTask,IdentifyTask.它们各自都有自己的特点. 查询功能分为属性查询和空间查询 FindTa ...
[Architecture Pattern] Repository实作查询功能
[Architecture Pattern] Repository实作查询功能范例下载范例程序代码:点此下载问题情景在系统的BLL与DAL之间,加入Repository Pattern的设计, ...
微信小程序+OLAMI(欧拉蜜)自然语言API接口制作智能查询工具--快递、聊天、日历等
微信小程序最近比较热门,再加上自然语义理解也越来越被人关注,于是我想赶赶潮流,做一个小程序试试.想来想去快递查询应该是一种比较普遍的需求. 如果你也在通过自然语言接口做点什么,希望我的这篇博客能帮到你 ...
arcgis api for js 地图查询
arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效 ...
Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图前端初始页面输入搜索信息页面点击查询结果页面环境介绍前端:vue 后端:springboot jdk:1.8及以上数据库:mysql 核心代码介绍 TypeCtrler .j ...
【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能
前言最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...
百度地图API 批量添加带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

类型转换和类型相关函数.png
C#工业物联网和集成系统解决方案的技术路线（数据源、数据采集、数据上传与接收、ActiveMQ、Mongodb、WebApi、手机App）
目录工业物联网和集成系统解决方案的技术路线... 1 前言... 1 第一章系统架构... 3 1.1 硬件构架图... 3 1.2 ...
在一个项目各个子模块中使用Maven的一些通用的准则
1.各个子模块都应该使用相同的groupId(如:com.mvnbook.account); 2.各个子模块如果一起开发和发布,还应该使用相同的版本:version: 3.各个子模块还应该使用一致的前 ...
spider RPC插件化体系
为了满足灵活扩展的需要,spider支持灵活的自定义插件扩展,从功能上来说,插件和过滤器的差别在于过滤器不会阻止请求的执行同时对于主程序不会有API上的影响(比如servlet 过滤器和监听器)(最多 ...
springmvc+spring+mybatis+maven项目集成shiro进行用户权限控制【转】
项目结构: 1.maven项目的pom中引入shiro所需的jar包依赖关系 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
使input文本框随其中内容而变化长度的方法
最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...
JDBC数据库访问操作的动态监测之 p6spy
P6spy是一个JDBC Driver的包装工具,p6spy通过对JDBC Driver的封装以达到对SQL语句的监听和分析,以达到各种目的. P6spy1.3 sf.net http://sourc ...
[Android]使用Dagger 2依赖注入 - DI介绍（翻译）
以下内容为原创,欢迎转载,转载请注明来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5092083.html 使用Dagger 2依赖注入 - DI介 ...
React Native学习笔记
React 是使用ES6 ,支持JSX语法, 开发组件化web或native的工具. 现阶段使用Babel工具转换成ES5 代码. 组件通过props属性传递不变化的内容,UI通过state属性变动来 ...
javascript-组合模式
组合模式笔记组合模式又称部分-整体模式,将对象组合成树形结构以表示'部分整体'的层次结构组合模式使得用户对单个对象和组合对象的使用具有一致性 demo实例 :表单模块要调用到前面学习到的寄生组合 ...

通过维基API实现维基百科查询功能

API:Main page以及API:Query/zh

通过维基API实现维基百科查询功能的更多相关文章

随机推荐

热门专题