Add search box for getting started search box_问答_开发者

Add search box for getting started search box

开发者 https://www.devze.com 2023-04-10 12:52 出处：网络

I want to add a search box for getting started example (Hello, World) on chrom extensionshttp://code.google.com/chrome/extensions/getstarted.html, I was able to add a search box so I can change the wo

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 jer开发者_如何转开发usalem 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?

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