Блог

Главная - Вопросы по программированию - Добавить окно поиска для начала поиска

Добавить окно поиска для начала поиска

#jquery #google-chrome-extension

#jquery #google-chrome-расширение

Вопрос:

Я хочу добавить окно поиска для примера начала работы (Привет, мир) в расширениях chrom http://code.google.com/chrome/extensions/getstarted.html , я смог добавить окно поиска, чтобы я мог изменить слова, используемые для получения разных миниатюр («text= hello world»).

Проблема, с которой я столкнулся, заключается в том, как обновить содержимое с помощью новых эскизов, например.:

Если я хочу выполнить поиск по слову Иерусалим и нажать кнопку перейти, содержимое (эскизы) будет обновлено новыми эскизами для Иерусалима

Нужно ли мне использовать AJAX? Пожалуйста, объясните.

Спасибо за любую помощь.

==================== Я включил jquery в popup.html

Внутри функции 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 перестает отвечать, где что-то не так в моем коде?

Ответ №1:

В этом примере уже используется 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.searchamp;"  
        "api_key=90485e931f687a9b9c2a66bf58a3861aamp;"  
        "text=" encodeURI(query) "amp;"  
        "safe_search=1amp;"    // 1 is "safe"
        "content_type=1amp;"    // 1 is "photos only"
        "sort=relevanceamp;"    // 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;
}

Комментарии:

1. здравствуйте, спасибо за помощь, возникла небольшая проблема, когда я нажимаю кнопку «Перейти», всплывающее окно перезагружается с теми же миниатюрами, даже после того, как я изменил значение текстового поля, когда я снова повторяю процесс, кнопка «Перейти» перестает отправляться, и ничего не происходит…

2. Действительно странно. Здесь он перезагружается для первой отправки и работает должным образом для последующих отправлений, и я не знаю почему. Итак, я только что удалил форму и поместил поисковый вызов в событие onclick.

3. привет, если вы проверяете выше, я добавил код, который я использую внутри showPhotos(). Я использую jQuery 1.6.4, я не понимаю, почему это происходит, попробуйте выяснить

4. Теперь теги <img> больше не являются дочерними элементами document.body(вы помещаете изображения внутри диапазона). Таким образом, removeChild возвращает ошибку not found. Поскольку теперь вы используете jQuery, вы можете просто сделать это, чтобы удалить предыдущие большие пальцы $(‘.savytip’).remove();

5. большое вам спасибо, это сработало отлично, последний вопрос: почему, когда мы впервые меняем текст внутри текстового поля, окно перезагружается и отображает текстовое значение по умолчанию? как улучшить расширение, чтобы не делать этого.