添加搜索框開始搜索框

我想添加一個搜索框，入門示例（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，我不明白爲什麼發生這種情況，試圖找出 –

添加搜索框開始搜索框

回答

相關問題