维基百科API沙盒，按用户输入搜索

试图在用户输入的维基百科中进行搜索，但由于某种原因它不起作用。首先，我认为这可能是由于跨域问题。但.ajax应该有所帮助。维基百科API沙盒，按用户输入搜索

这里是codepen：http://codepen.io/ekilja01/pen/pRerpb

这里是我的HTML：

<script src="https://use.fontawesome.com/43f8201759.js"> 
</script> 


<body> 

    <h2 class="headertext">WIKIPEDIA <br> VIEWER </h2> 


    <div class="row"> 
    <div class="col-10-md"> 

     <input class="searchRequest blink_me" id="cursor" type="text" placeholder="__"></input> 

    </div> 

    <div class="searchIcon col-2-md"> </div> 
    </div> 

<div> 
    <p class=results></p> 
</div> 


</body>

这里是我的jQuery ：

$(document).ready(function() { 

    var icon = "<i class='fa fa-search fa-2x'></i>"; 

    $('#cursor').on("keydown", function() { 
    $(this).removeClass("blink_me"); 
    var searchIcon = $(".searchIcon"); 

    searchIcon.empty(); 
    if ($(".searchRequest").val().length > 0) { 
     searchIcon.append(icon); 
    } 






    searchIcon.on("click", function() { 
console.log("clicked!"); 


     var search = $(".searchRequest").val(); 

     var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + search + "&format=json&callback=?"; 

     $.ajax({ 
     dataType: "jsonp", 
     url: url, 
     success: function(data) { 
      $(".results").html(data[0]); 

      console.log(data[0]); 
      } 

     }); 
    }); 
    }); 
});

我究竟做错了什么？请帮忙。

来源

2017-01-22 Alina Khachatrian

您的js的加载顺序出现错误。

的data对象包含索引2，我假设数组中的结果的文本要显示什么，将其更改为

$(".results").html(data[2]);

可以检查你的原始代码的修改版这里

http://codepen.io/anon/pen/mRmGXG

来源

2017-01-22 21:55:40

它有点不对劲$（ “结果”）。HTML（[2]），但我得到了它。必须是$（“。results”）。html（data [2]。非常感谢！ –

我忘了点击保存按钮，现在应该没事了。 –

能否请你进一步告知我如何获得所有10个结果已被发现显示在页面上？我想我必须使用每个？ –

维基百科API沙盒，按用户输入搜索

回答

相关问题