添加搜索框入门搜索框

发布于 2024-12-08 07:43:19 字数 1405 浏览 0 评论 0原文

我想添加一个搜索框，用于 chrom 扩展 http: 上的入门示例（Hello, World） //code.google.com/chrome/extensions/getstarted.html，我能够添加一个搜索框，以便我可以更改用于获取不同缩略图的单词（“text=hello%20world” ）。

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

如果我想搜索单词耶路撒冷并单击“执行”按钮，内容（缩略图）将使用耶路撒冷的新缩略图进行更新

我需要使用吗阿贾克斯？请解释一下。

感谢您的帮助。

=================== 我在 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');
}}

扩展程序第一次工作，并且 go 按钮停止响应，我的代码中的错误在哪里？

原文

I want to add a search box for getting started example (Hello, World) on chrom extensions http://code.google.com/chrome/extensions/getstarted.html, I was able to add a search box so I can change the word/s are used to get different thumbnails ("text=hello%20world").

The problem I faced is how to refresh the contents with a new thumbnails, for ex.:

If I want to search for word jerusalem and click go button the contents (thumbnails) will be updated with a new thumbnails for jerusalem

Do I need to use AJAX? Please explain.

Thanx for any help.

====================
I included jquery in popup.html

Inside showPhotos() function I did the following:

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');
}}

The extension just work for the first time and the go button stop responding, where is the wrong in my code?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

垂暮老矣 2024-12-15 07:43:19

此示例已使用 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.js

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";
}

popup.css

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

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

This example is already using AJAX, aka XHR(XMLHttpRequest).
All you need to do is put the request inside a function to be able to call it again later.
Also You'll need to remove the previous thumbs before appending the new ones(see the first line of 'showPhotos' function).

Here's a working example:
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.js

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";
}

popup.css

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

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

回复收藏 0 原文

~没有更多了~