Question

我是javacript的新手。我使用API来实现自定义搜索功能。但是在我的搜索页面结果显示只有在我输入第一个搜索键之后。如果我输入另一个搜索键，则第二个键的结果不会显示，直到我刷新页面。

如何在搜索框中输入更多字符时，结果会自动更新？

HTML code：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jsonData.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      function display() {
          document.location = "contentpage.html";
      }
      $(document).ready(function () {
          $("#submit").click(searchAPI);
      });
    </script>
  </head>
  <body>
    <input type="text" id="search1"    >
    <button id="submit" >submit</button>
    <div id="div1">
        <img id="img" >
        <p id="desc">  </p>
        <p><a href="" target="_blank" id="link"></a></p>
    </div>
  </body>
</html>

我的JS代码：

 function searchAPI(){
   var key= $("#search1").val();
   var htmlContent="<ul>";

   $.getJSON('http://api.duckduckgo.com/?q=' + key + ' &format=json&pretty=1&callback=?', function(data) {
      var htmlContent = '<ul>';
      for (var i = 0; i < data.RelatedTopics.length; i++) {
          var desc = data.RelatedTopics[i].Text;
          var url = data.RelatedTopics[i].Icon.URL;
          var link = data.RelatedTopics[i].FirstURL;
          document.getElementById('link').href = link;
          var y = document.getElementById("link");
          y.innerHTML = link;
          htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:block'/> " +
          "<p id='desc'>" + desc + "</p>" + "<a target='_blank' id='link' href=" + link + " >go to website</a></li>";
      }
      htmlContent += "</ul>";
      $('#div1').html(htmlContent);
    });
 }

任何人都可以帮我解决这个问题......提前致谢。

如何创建动态搜索页面

0 个答案: