YUI 3.x Home -

YUI Library Examples: AutoComplete: Find Photos on Flickr (Custom Formatting, YQL Source)

AutoComplete: Find Photos on Flickr (Custom Formatting, YQL Source)

This example uses the Flickr Search API (via YQL) to allow the user to select photo results based on a search query. After each photo is selected, it's added to the collection of photos displayed below the input field.

A custom resultFormatter is used to format the Flickr results in the AutoComplete dropdown list, and a custom select event handler is used to override the default selection logic.

View example in new window.


  • No photos selected.

HTML

  1. <div id="demo">
  2.   <label for="ac-input">Search Flickr:</label><br>
  3.   <input id="ac-input" type="text">
  4.  
  5.   <ul id="photos">
  6.     <li class="empty">No photos selected.</li>
  7.   </ul>
  8. </div>
<div id="demo">
  <label for="ac-input">Search Flickr:</label><br>
  <input id="ac-input" type="text">
 
  <ul id="photos">
    <li class="empty">No photos selected.</li>
  </ul>
</div>

CSS

  1. #ac-input { width: 300px; }
  2.  
  3. #photos {
  4.   border: 1px solid #cfcfcf;
  5.   list-style: none;
  6.   margin: 1.5em 0 0;
  7.   padding: 6px;
  8. }
  9.  
  10. #photos li {
  11.   display: inline-block;
  12.   list-style: none;
  13.  
  14.   /* fake inline-block for IE<8 */
  15.   zoom: 1;
  16.   *display: inline;
  17. }
  18.  
  19. #photos .empty { font-style: italic; }
  20.  
  21. #photos .photo {
  22.   margin: 5px;
  23.   text-align: center;
  24.   width: 100px;
  25. }
  26.  
  27. #photos .photo img {
  28.   border: 1px solid #000;
  29.   vertical-align: top;
  30. }
  31.  
  32. .result {
  33.   margin: 2px 0;
  34.   zoom: 1;
  35. }
  36.  
  37. .result:after {
  38.   clear: both;
  39.   content: '.';
  40.   display: block;
  41.   height: 0;
  42.   visibility: hidden;
  43. }
  44.  
  45. .result .photo {
  46.   height: 32px;
  47.   float: left;
  48.   margin-right: 6px;
  49.   width: 32px;
  50. }
  51.  
  52. .result .title { vertical-align: top; }
#ac-input { width: 300px; }
 
#photos {
  border: 1px solid #cfcfcf;
  list-style: none;
  margin: 1.5em 0 0;
  padding: 6px;
}
 
#photos li {
  display: inline-block;
  list-style: none;
 
  /* fake inline-block for IE<8 */
  zoom: 1;
  *display: inline;
}
 
#photos .empty { font-style: italic; }
 
#photos .photo {
  margin: 5px;
  text-align: center;
  width: 100px;
}
 
#photos .photo img {
  border: 1px solid #000;
  vertical-align: top;
}
 
.result {
  margin: 2px 0;
  zoom: 1;
}
 
.result:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
}
 
.result .photo {
  height: 32px;
  float: left;
  margin-right: 6px;
  width: 32px;
}
 
.result .title { vertical-align: top; }

JavaScript

  1. YUI().use("autocomplete", "autocomplete-highlighters", function (Y) {
  2.   var inputNode  = Y.one('#ac-input'),
  3.       photosNode = Y.one('#photos');
  4.  
  5.   // Constructs an image URL for the Flickr photo represented by the given
  6.   // AutoComplete result object.
  7.   function getImageUrl(result, size) {
  8.     if (!size) { size = 's'; }
  9.  
  10.     return Y.Lang.sub(
  11.       'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_' + size + '.jpg',
  12.       result.raw
  13.     );
  14.   }
  15.  
  16.   inputNode.plug(Y.Plugin.AutoComplete, {
  17.     maxResults: 5,
  18.     resultHighlighter: 'wordMatch',
  19.     resultTextLocator: 'title',
  20.     source: 'select * from flickr.photos.search where text="{query}" limit {maxResults}',
  21.  
  22.     // Custom result formatter for Flickr results.
  23.     resultFormatter: function (query, results) {
  24.       return Y.Array.map(results, function (result) {
  25.         return '<div class="result">' +
  26.                  '<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
  27.                  '<span class="title">' + result.highlighted + '</span>' +
  28.                '</div>';
  29.       });
  30.     }
  31.   });
  32.  
  33.   // After a photo is selected, add it to the collection.
  34.   inputNode.ac.on('select', function (e) {
  35.     var result = e.result;
  36.  
  37.     // Prevent the default select handler so we can provide our own selection
  38.     // behavior instead.
  39.     e.preventDefault();
  40.  
  41.     inputNode.select();
  42.     inputNode.ac.hide();
  43.  
  44.     // Remove the 'No photos selected' message if it exists.
  45.     photosNode.all('.empty').remove();
  46.  
  47.     // Append a new list item containing the selected photo.
  48.     photosNode.append(
  49.       '<li class="photo">' +
  50.         '<img src="' + getImageUrl(result, 't') +
  51.             '" alt="' + result.raw.title + '" title="' + result.raw.title + '">' +
  52.       '</li>'
  53.     );
  54.   });
  55. });
YUI().use("autocomplete", "autocomplete-highlighters", function (Y) {
  var inputNode  = Y.one('#ac-input'),
      photosNode = Y.one('#photos');
 
  // Constructs an image URL for the Flickr photo represented by the given
  // AutoComplete result object.
  function getImageUrl(result, size) {
    if (!size) { size = 's'; }
 
    return Y.Lang.sub(
      'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_' + size + '.jpg',
      result.raw
    );
  }
 
  inputNode.plug(Y.Plugin.AutoComplete, {
    maxResults: 5,
    resultHighlighter: 'wordMatch',
    resultTextLocator: 'title',
    source: 'select * from flickr.photos.search where text="{query}" limit {maxResults}',
 
    // Custom result formatter for Flickr results.
    resultFormatter: function (query, results) {
      return Y.Array.map(results, function (result) {
        return '<div class="result">' +
                 '<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
                 '<span class="title">' + result.highlighted + '</span>' +
               '</div>';
      });
    }
  });
 
  // After a photo is selected, add it to the collection.
  inputNode.ac.on('select', function (e) {
    var result = e.result;
 
    // Prevent the default select handler so we can provide our own selection
    // behavior instead.
    e.preventDefault();
 
    inputNode.select();
    inputNode.ac.hide();
 
    // Remove the 'No photos selected' message if it exists.
    photosNode.all('.empty').remove();
 
    // Append a new list item containing the selected photo.
    photosNode.append(
      '<li class="photo">' +
        '<img src="' + getImageUrl(result, 't') +
            '" alt="' + result.raw.title + '" title="' + result.raw.title + '">' +
      '</li>'
    );
  });
});

Complete Example Source

  1. <style>
  2.   #ac-input { width: 300px; }
  3.  
  4.   #photos {
  5.     border: 1px solid #cfcfcf;
  6.     list-style: none;
  7.     margin: 1.5em 0 0;
  8.     padding: 6px;
  9.   }
  10.  
  11.   #photos li {
  12.     display: inline-block;
  13.     list-style: none;
  14.  
  15.     /* fake inline-block for IE<8 */
  16.     zoom: 1;
  17.     *display: inline;
  18.   }
  19.  
  20.   #photos .empty { font-style: italic; }
  21.  
  22.   #photos .photo {
  23.     margin: 5px;
  24.     text-align: center;
  25.     width: 100px;
  26.   }
  27.  
  28.   #photos .photo img {
  29.     border: 1px solid #000;
  30.     vertical-align: top;
  31.   }
  32.  
  33.   .result {
  34.     margin: 2px 0;
  35.     zoom: 1;
  36.   }
  37.  
  38.   .result:after {
  39.     clear: both;
  40.     content: '.';
  41.     display: block;
  42.     height: 0;
  43.     visibility: hidden;
  44.   }
  45.  
  46.   .result .photo {
  47.     height: 32px;
  48.     float: left;
  49.     margin-right: 6px;
  50.     width: 32px;
  51.   }
  52.  
  53.   .result .title { vertical-align: top; }
  54. </style>
  55.  
  56. <div id="demo">
  57.   <label for="ac-input">Search Flickr:</label><br>
  58.   <input id="ac-input" type="text">
  59.  
  60.   <ul id="photos">
  61.     <li class="empty">No photos selected.</li>
  62.   </ul>
  63. </div>
  64.  
  65. <script>
  66. YUI().use("autocomplete", "autocomplete-highlighters", function (Y) {
  67.   var inputNode  = Y.one('#ac-input'),
  68.       photosNode = Y.one('#photos');
  69.  
  70.   // Constructs an image URL for the Flickr photo represented by the given
  71.   // AutoComplete result object.
  72.   function getImageUrl(result, size) {
  73.     if (!size) { size = 's'; }
  74.  
  75.     return Y.Lang.sub(
  76.       'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_' + size + '.jpg',
  77.       result.raw
  78.     );
  79.   }
  80.  
  81.   inputNode.plug(Y.Plugin.AutoComplete, {
  82.     maxResults: 5,
  83.     resultHighlighter: 'wordMatch',
  84.     resultTextLocator: 'title',
  85.     source: 'select * from flickr.photos.search where text="{query}" limit {maxResults}',
  86.  
  87.     // Custom result formatter for Flickr results.
  88.     resultFormatter: function (query, results) {
  89.       return Y.Array.map(results, function (result) {
  90.         return '<div class="result">' +
  91.                  '<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
  92.                  '<span class="title">' + result.highlighted + '</span>' +
  93.                '</div>';
  94.       });
  95.     }
  96.   });
  97.  
  98.   // After a photo is selected, add it to the collection.
  99.   inputNode.ac.on('select', function (e) {
  100.     var result = e.result;
  101.  
  102.     // Prevent the default select handler so we can provide our own selection
  103.     // behavior instead.
  104.     e.preventDefault();
  105.  
  106.     inputNode.select();
  107.     inputNode.ac.hide();
  108.  
  109.     // Remove the 'No photos selected' message if it exists.
  110.     photosNode.all('.empty').remove();
  111.  
  112.     // Append a new list item containing the selected photo.
  113.     photosNode.append(
  114.       '<li class="photo">' +
  115.         '<img src="' + getImageUrl(result, 't') +
  116.             '" alt="' + result.raw.title + '" title="' + result.raw.title + '">' +
  117.       '</li>'
  118.     );
  119.   });
  120. });
  121. </script>
<style>
  #ac-input { width: 300px; }
 
  #photos {
    border: 1px solid #cfcfcf;
    list-style: none;
    margin: 1.5em 0 0;
    padding: 6px;
  }
 
  #photos li {
    display: inline-block;
    list-style: none;
 
    /* fake inline-block for IE<8 */
    zoom: 1;
    *display: inline;
  }
 
  #photos .empty { font-style: italic; }
 
  #photos .photo {
    margin: 5px;
    text-align: center;
    width: 100px;
  }
 
  #photos .photo img {
    border: 1px solid #000;
    vertical-align: top;
  }
 
  .result {
    margin: 2px 0;
    zoom: 1;
  }
 
  .result:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
  }
 
  .result .photo {
    height: 32px;
    float: left;
    margin-right: 6px;
    width: 32px;
  }
 
  .result .title { vertical-align: top; }
</style>
 
<div id="demo">
  <label for="ac-input">Search Flickr:</label><br>
  <input id="ac-input" type="text">
 
  <ul id="photos">
    <li class="empty">No photos selected.</li>
  </ul>
</div>
 
<script>
YUI().use("autocomplete", "autocomplete-highlighters", function (Y) {
  var inputNode  = Y.one('#ac-input'),
      photosNode = Y.one('#photos');
 
  // Constructs an image URL for the Flickr photo represented by the given
  // AutoComplete result object.
  function getImageUrl(result, size) {
    if (!size) { size = 's'; }
 
    return Y.Lang.sub(
      'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_' + size + '.jpg',
      result.raw
    );
  }
 
  inputNode.plug(Y.Plugin.AutoComplete, {
    maxResults: 5,
    resultHighlighter: 'wordMatch',
    resultTextLocator: 'title',
    source: 'select * from flickr.photos.search where text="{query}" limit {maxResults}',
 
    // Custom result formatter for Flickr results.
    resultFormatter: function (query, results) {
      return Y.Array.map(results, function (result) {
        return '<div class="result">' +
                 '<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
                 '<span class="title">' + result.highlighted + '</span>' +
               '</div>';
      });
    }
  });
 
  // After a photo is selected, add it to the collection.
  inputNode.ac.on('select', function (e) {
    var result = e.result;
 
    // Prevent the default select handler so we can provide our own selection
    // behavior instead.
    e.preventDefault();
 
    inputNode.select();
    inputNode.ac.hide();
 
    // Remove the 'No photos selected' message if it exists.
    photosNode.all('.empty').remove();
 
    // Append a new list item containing the selected photo.
    photosNode.append(
      '<li class="photo">' +
        '<img src="' + getImageUrl(result, 't') +
            '" alt="' + result.raw.title + '" title="' + result.raw.title + '">' +
      '</li>'
    );
  });
});
</script>

More AutoComplete Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings