添加搜索框开始搜索框

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

我面临的问题是如何刷新的内容与新的缩略图，为前：

如果我要搜索词耶路撒冷，然后点击搜索内容（缩略图）将与新的更新耶路撒冷的缩略图

我需要使用AJAX吗？请解释。

Thanx的任何帮助。

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

该扩展只是第一次工作和去按钮停止响应，在我的代码错误在哪里？

来源

2011-10-03 Ya Basha

这个例子已经在使用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; 
}

来源

2011-10-03 16:37:32 cvsguimaraes

你好，谢谢你对我的帮助，当我点击按钮弹出窗口时出现一个小问题，即使改变文本字段的值后，弹出窗口重新加载，当我再次重复该过程时，按钮停止提交和什么也没有发生...... –

真的很奇怪。这里是重新加载第一次提交并为后续提交工作正确，我不知道为什么。因此，我刚刚删除了该表单，并将onclick事件进行了搜索调用。 – cvsguimaraes

嗨，如果你在上面检查，我已经添加了showPhotos（）中使用的代码。我使用jQuery 1.6.4，我不明白为什么发生这种情况，试图找出 –

添加搜索框开始搜索框

回答

相关问题