Jquery 添加入门搜索框搜索框_Jquery_Google Chrome Extension

Jquery 添加入门搜索框搜索框

jquery google-chrome-extension

Jquery 添加入门搜索框搜索框,jquery,google-chrome-extension,Jquery,Google Chrome Extension,我想为chrom extensions上的入门示例（Hello，World）添加一个搜索框，我可以添加一个搜索框，以便更改用于获取不同缩略图的单词（“text=Hello%20world”）我面临的问题是如何使用新的缩略图刷新内容，例如：如果我想搜索单词耶路撒冷并点击go按钮，内容（缩略图）将更新为耶路撒冷的新缩略图我需要使用AJAX吗？请解释一下谢谢你的帮助 ==================== 我在popup.html中包含了jquery 在showPhotos（）函数中，我执行

我想为chrom extensions上的入门示例（Hello，World）添加一个搜索框，我可以添加一个搜索框，以便更改用于获取不同缩略图的单词（“text=Hello%20world”）

我面临的问题是如何使用新的缩略图刷新内容，例如：

如果我想搜索单词耶路撒冷并点击go按钮，内容（缩略图）将更新为耶路撒冷的新缩略图

我需要使用AJAX吗？请解释一下

谢谢你的帮助

==================== 我在popup.html中包含了jquery

在showPhotos（）函数中，我执行了以下操作：

function showPhotos() {
//Remove previous thumbs if any
for (var i = document.images.length; i-- > 0;) document.body.removeChild(document.images[i]);

var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    var span = document.createElement("span");
    var span1 = document.createElement("span");

    $(span1).attr('id', 'innerSpan');
    $(span1).attr('style', 'text-align:center;color:#ffffff;');
    $(span1).addClass('tooltip black bottom center w100 slide-up');
    $(span1).html('<i>' + photo.getAttribute("title") + '</i>');

    $(span).addClass('savytip');
    $(span).attr('id', 'outerSpan');

    $(img).attr('src', constructImageURL(photo));

    $(span1).appendTo(span);
    $(img).appendTo(span);

    $(span).appendTo('body');
}}

函数showPhotos（）{
//删除以前的拇指（如果有）
对于（var i=document.images.length；i-->0；）document.body.removeChild（document.images[i]）；
var photos=req.responseXML.getElementsByTagName（“照片”）；
for（var i=0，photo；photo=photos[i]；i++）{
var img=document.createElement（“图像”）；
var span=document.createElement（“span”）；
var span1=document.createElement（“span”）；
$（span1.attr（'id'，'innerSpan'）；
$（span1）.attr（'style'，'text align:center；color:#ffffff；'）；
$（span1）.addClass（“工具提示黑色底部中心w100向上滑动”）；
$（span1.html（“”+photo.getAttribute（“title”）+“”）；
$（span）.addClass（'savytip'）；
$（span）.attr（'id'，'outerSpan'）；
$（img）.attr（'src'，constructImageURL（照片））；
$（span1）。附录（span）；
$（img）.附录（span）；
$（span）.appendTo（'body'）；
}}

扩展只是第一次工作，go按钮停止响应，我的代码中哪里有错误？

这个示例已经在使用AJAX，也称为XHR（XMLHttpRequest）。您所需要做的就是将请求放入函数中，以便以后能够再次调用它。此外，在添加新的拇指之前，您还需要删除以前的拇指（请参阅“showPhotos”功能的第一行）

下面是一个工作示例： popup.html

<html>
<head>
    <script type="text/javascript" src="popup.js"></script>
    <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body onload="search()">
    <input id="query" value="Hello World"><input type="button" value="go" onclick="search()">
</body>
</html>

popup.css

function search() {
    request(document.getElementById('query').value);
    return false;
}

function request(query) {
    window.req = new XMLHttpRequest();
    req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text="+encodeURI(query)+"&" +
        "safe_search=1&" +  // 1 is "safe"
        "content_type=1&" +  // 1 is "photos only"
        "sort=relevance&" +  // another good one is "interestingness-desc"
        "per_page=20",
    true);
    req.onload = showPhotos;
    req.send(null);
}

function showPhotos() {
  //Remove previous thumbs if any
  for(var i=document.images.length;i-->0;) document.body.removeChild(document.images[i]);

  var photos = req.responseXML.getElementsByTagName("photo");
  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
      ".static.flickr.com/" + photo.getAttribute("server") +
      "/" + photo.getAttribute("id") +
      "_" + photo.getAttribute("secret") +
      "_s.jpg";
}

body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}

您好，谢谢您的帮助，当我点击go按钮时出现了一个小问题弹出窗口用相同的缩略图重新加载，即使我更改了文本字段的值，当我再次重复该过程时go按钮停止提交，并且没有发生任何事情…真的很奇怪。在这里，它是重新加载的第一次提交和工作正常的后续提交，我不知道为什么。因此，我刚刚删除了表单并将搜索调用放在onclick event.hi上，如果您在上面检查，我已经添加了showPhotos（）中使用的代码。我使用jQuery1.6.4，我不明白为什么会发生这种情况，试着弄清楚现在标记不再是document.body的子项（您将图像放在一个范围内）。因此，removeChild返回一个未找到的错误。因为现在您使用jQuery，所以只需删除前面的thumbs$（'.savytip'）.remove（）；非常感谢，伙计，这很好，最后一个问题：为什么当我们第一次更改文本字段中的文本时，窗口会重新加载并显示默认文本值？如何改进扩展到不这样做。