YUI 3.x Home -

YUI Library Examples: AutoComplete: Filter a Set of Existing Items on the Page

AutoComplete: Filter a Set of Existing Items on the Page

This example demonstrates how to use AutoCompleteBase alone, without a list widget, to filter a set of existing items on a page. While this is a departure from the typical autocomplete interaction pattern, AutoCompleteBase is flexible enough to provide an excellent solution without any unnecessary overhead.

To filter the list of delicious pies, type a descriptive term into the input field below. For example, to see only apple pies, type "apple", or for all fruit pies, type "fruit".

View example in new window.

HTML

  1. <div id="demo">
  2.   <label for="ac-input">Filter by:</label><br>
  3.   <input id="ac-input" type="text">
  4.  
  5.   <ul id="photos">
  6.     <li class="photo" data-tags="apple, fruit">
  7.       <a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
  8.         <img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
  9.       </a>
  10.     </li>
  11.  
  12.     <li class="photo" data-tags="pecan">
  13.       <a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
  14.         <img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
  15.       </a>
  16.     </li>
  17.  
  18.     <li class="photo" data-tags="maple custard">
  19.       <a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
  20.         <img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
  21.       </a>
  22.     </li>
  23.  
  24.     <li class="photo" data-tags="pumpkin">
  25.       <a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
  26.         <img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
  27.       </a>
  28.     </li>
  29.  
  30.     <li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
  31.       <a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
  32.         <img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
  33.       </a>
  34.     </li>
  35.  
  36.     <li class="photo" data-tags="cherry, hearts, fruit">
  37.       <a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
  38.         <img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
  39.       </a>
  40.     </li>
  41.  
  42.     <li class="photo" data-tags="lattice, sour cherry, fruit">
  43.       <a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
  44.         <img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
  45.       </a>
  46.     </li>
  47.  
  48.     <li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
  49.       <a href="http://www.flickr.com/photos/faerye/4283875981/">
  50.         <img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
  51.       </a>
  52.     </li>
  53.  
  54.     <li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
  55.       <a href="http://www.flickr.com/photos/faerye/4592482821/">
  56.         <img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
  57.       </a>
  58.     </li>
  59.  
  60.     <li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
  61.       <a href="http://www.flickr.com/photos/faerye/3492566166/">
  62.         <img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
  63.       </a>
  64.     </li>
  65.  
  66.     <li class="photo" data-tags="lattice top, apple, fruit">
  67.       <a href="http://www.flickr.com/photos/faerye/3394679580/">
  68.         <img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
  69.       </a>
  70.     </li>
  71.   </ul>
  72. </div>
<div id="demo">
  <label for="ac-input">Filter by:</label><br>
  <input id="ac-input" type="text">
 
  <ul id="photos">
    <li class="photo" data-tags="apple, fruit">
      <a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
        <img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
      </a>
    </li>
 
    <li class="photo" data-tags="pecan">
      <a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
        <img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
      </a>
    </li>
 
    <li class="photo" data-tags="maple custard">
      <a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
        <img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
      </a>
    </li>
 
    <li class="photo" data-tags="pumpkin">
      <a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
        <img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
      </a>
    </li>
 
    <li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
      <a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
        <img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
      </a>
    </li>
 
    <li class="photo" data-tags="cherry, hearts, fruit">
      <a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
        <img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
      </a>
    </li>
 
    <li class="photo" data-tags="lattice, sour cherry, fruit">
      <a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
        <img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
      </a>
    </li>
 
    <li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
      <a href="http://www.flickr.com/photos/faerye/4283875981/">
        <img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
      </a>
    </li>
 
    <li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
      <a href="http://www.flickr.com/photos/faerye/4592482821/">
        <img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
      </a>
    </li>
 
    <li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
      <a href="http://www.flickr.com/photos/faerye/3492566166/">
        <img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
      </a>
    </li>
 
    <li class="photo" data-tags="lattice top, apple, fruit">
      <a href="http://www.flickr.com/photos/faerye/3394679580/">
        <img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
      </a>
    </li>
  </ul>
</div>

CSS

  1. #photos {
  2.   border: 1px solid #cfcfcf;
  3.   list-style: none;
  4.   margin: 1.5em 0 0;
  5.   padding: 6px;
  6. }
  7.  
  8. #photos li {
  9.   display: inline-block;
  10.   list-style: none;
  11.  
  12.   /* fake inline-block for IE<8 */
  13.   zoom: 1;
  14.   *display: inline;
  15. }
  16.  
  17. #photos .empty { font-style: italic; }
  18.  
  19. #photos .photo {
  20.   margin: 5px;
  21.   text-align: center;
  22.   width: 240px;
  23. }
  24.  
  25. #photos .photo img {
  26.   border: 1px solid #000;
  27.   vertical-align: top;
  28. }
  29.  
  30. #photos .hidden { display: none; }
#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: 240px;
}
 
#photos .photo img {
  border: 1px solid #000;
  vertical-align: top;
}
 
#photos .hidden { display: none; }

JavaScript

  1. YUI().use("autocomplete-base", "autocomplete-filters", function (Y) {
  2.   // Create a custom PieFilter class that extends AutoCompleteBase.
  3.   var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
  4.     initializer: function () {
  5.       this._bindUIACBase();
  6.       this._syncUIACBase();
  7.     }
  8.   }),
  9.  
  10.   // Create and configure an instance of the PieFilter class.
  11.   filter = new PieFilter({
  12.     inputNode: '#ac-input',
  13.     minQueryLength: 0,
  14.     queryDelay: 0,
  15.  
  16.     // Run an immediately-invoked function that returns an array of results to
  17.     // be used for each query, based on the photos on the page. Since the list
  18.     // of photos remains static, this saves time by not gathering the results
  19.     // for each query.
  20.     //
  21.     // If the list of results were not static, we could simply set the source
  22.     // to the function itself rather than invoking the function immediately,
  23.     // and it would then run on every query.
  24.     source: (function () {
  25.       var results = [];
  26.  
  27.       // Build an array of results containing each photo in the list.
  28.       Y.all('#photos > .photo').each(function (node) {
  29.         results.push({
  30.           node: node,
  31.           tags: node.getAttribute('data-tags')
  32.         });
  33.       });
  34.  
  35.       return results;
  36.     }()), // <-- Note the parens. This invokes the function immediately.
  37.           //     Remove these to invoke the function on every query instead.
  38.  
  39.     // Specify that the "tags" property of each result object contains the text
  40.     // to filter on.
  41.     resultTextLocator: 'tags',
  42.  
  43.     // Use a result filter to filter the photo results based on their tags.
  44.     resultFilters: 'phraseMatch'
  45.   });
  46.  
  47.   // Subscribe to the "results" event and update photo visibility based on
  48.   // whether or not they were included in the list of results.
  49.   filter.on('results', function (e) {
  50.     // First hide all the photos.
  51.     Y.all('#photos > .photo').addClass('hidden');
  52.  
  53.     // Then unhide the ones that are in the current result list.
  54.     Y.Array.each(e.results, function (result) {
  55.       result.raw.node.removeClass('hidden');
  56.     });
  57.   });
  58. });
YUI().use("autocomplete-base", "autocomplete-filters", function (Y) {
  // Create a custom PieFilter class that extends AutoCompleteBase.
  var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
    initializer: function () {
      this._bindUIACBase();
      this._syncUIACBase();
    }
  }),
 
  // Create and configure an instance of the PieFilter class.
  filter = new PieFilter({
    inputNode: '#ac-input',
    minQueryLength: 0,
    queryDelay: 0,
 
    // Run an immediately-invoked function that returns an array of results to
    // be used for each query, based on the photos on the page. Since the list
    // of photos remains static, this saves time by not gathering the results
    // for each query.
    //
    // If the list of results were not static, we could simply set the source
    // to the function itself rather than invoking the function immediately,
    // and it would then run on every query.
    source: (function () {
      var results = [];
 
      // Build an array of results containing each photo in the list.
      Y.all('#photos > .photo').each(function (node) {
        results.push({
          node: node,
          tags: node.getAttribute('data-tags')
        });
      });
 
      return results;
    }()), // <-- Note the parens. This invokes the function immediately.
          //     Remove these to invoke the function on every query instead.
 
    // Specify that the "tags" property of each result object contains the text
    // to filter on.
    resultTextLocator: 'tags',
 
    // Use a result filter to filter the photo results based on their tags.
    resultFilters: 'phraseMatch'
  });
 
  // Subscribe to the "results" event and update photo visibility based on
  // whether or not they were included in the list of results.
  filter.on('results', function (e) {
    // First hide all the photos.
    Y.all('#photos > .photo').addClass('hidden');
 
    // Then unhide the ones that are in the current result list.
    Y.Array.each(e.results, function (result) {
      result.raw.node.removeClass('hidden');
    });
  });
});

Complete Example Source

  1. <style>
  2.   #photos {
  3.     border: 1px solid #cfcfcf;
  4.     list-style: none;
  5.     margin: 1.5em 0 0;
  6.     padding: 6px;
  7.   }
  8.  
  9.   #photos li {
  10.     display: inline-block;
  11.     list-style: none;
  12.  
  13.     /* fake inline-block for IE<8 */
  14.     zoom: 1;
  15.     *display: inline;
  16.   }
  17.  
  18.   #photos .empty { font-style: italic; }
  19.  
  20.   #photos .photo {
  21.     margin: 5px;
  22.     text-align: center;
  23.     width: 240px;
  24.   }
  25.  
  26.   #photos .photo img {
  27.     border: 1px solid #000;
  28.     vertical-align: top;
  29.   }
  30.  
  31.   #photos .hidden { display: none; }
  32. </style>
  33.  
  34. <div id="demo">
  35.   <label for="ac-input">Filter by:</label><br>
  36.   <input id="ac-input" type="text">
  37.  
  38.   <ul id="photos">
  39.     <li class="photo" data-tags="apple, fruit">
  40.       <a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
  41.         <img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
  42.       </a>
  43.     </li>
  44.  
  45.     <li class="photo" data-tags="pecan">
  46.       <a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
  47.         <img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
  48.       </a>
  49.     </li>
  50.  
  51.     <li class="photo" data-tags="maple custard">
  52.       <a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
  53.         <img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
  54.       </a>
  55.     </li>
  56.  
  57.     <li class="photo" data-tags="pumpkin">
  58.       <a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
  59.         <img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
  60.       </a>
  61.     </li>
  62.  
  63.     <li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
  64.       <a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
  65.         <img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
  66.       </a>
  67.     </li>
  68.  
  69.     <li class="photo" data-tags="cherry, hearts, fruit">
  70.       <a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
  71.         <img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
  72.       </a>
  73.     </li>
  74.  
  75.     <li class="photo" data-tags="lattice, sour cherry, fruit">
  76.       <a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
  77.         <img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
  78.       </a>
  79.     </li>
  80.  
  81.     <li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
  82.       <a href="http://www.flickr.com/photos/faerye/4283875981/">
  83.         <img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
  84.       </a>
  85.     </li>
  86.  
  87.     <li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
  88.       <a href="http://www.flickr.com/photos/faerye/4592482821/">
  89.         <img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
  90.       </a>
  91.     </li>
  92.  
  93.     <li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
  94.       <a href="http://www.flickr.com/photos/faerye/3492566166/">
  95.         <img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
  96.       </a>
  97.     </li>
  98.  
  99.     <li class="photo" data-tags="lattice top, apple, fruit">
  100.       <a href="http://www.flickr.com/photos/faerye/3394679580/">
  101.         <img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
  102.       </a>
  103.     </li>
  104.   </ul>
  105. </div>
  106.  
  107. <script>
  108. YUI().use("autocomplete-base", "autocomplete-filters", function (Y) {
  109.   // Create a custom PieFilter class that extends AutoCompleteBase.
  110.   var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
  111.     initializer: function () {
  112.       this._bindUIACBase();
  113.       this._syncUIACBase();
  114.     }
  115.   }),
  116.  
  117.   // Create and configure an instance of the PieFilter class.
  118.   filter = new PieFilter({
  119.     inputNode: '#ac-input',
  120.     minQueryLength: 0,
  121.     queryDelay: 0,
  122.  
  123.     // Run an immediately-invoked function that returns an array of results to
  124.     // be used for each query, based on the photos on the page. Since the list
  125.     // of photos remains static, this saves time by not gathering the results
  126.     // for each query.
  127.     //
  128.     // If the list of results were not static, we could simply set the source
  129.     // to the function itself rather than invoking the function immediately,
  130.     // and it would then run on every query.
  131.     source: (function () {
  132.       var results = [];
  133.  
  134.       // Build an array of results containing each photo in the list.
  135.       Y.all('#photos > .photo').each(function (node) {
  136.         results.push({
  137.           node: node,
  138.           tags: node.getAttribute('data-tags')
  139.         });
  140.       });
  141.  
  142.       return results;
  143.     }()), // <-- Note the parens. This invokes the function immediately.
  144.           //     Remove these to invoke the function on every query instead.
  145.  
  146.     // Specify that the "tags" property of each result object contains the text
  147.     // to filter on.
  148.     resultTextLocator: 'tags',
  149.  
  150.     // Use a result filter to filter the photo results based on their tags.
  151.     resultFilters: 'phraseMatch'
  152.   });
  153.  
  154.   // Subscribe to the "results" event and update photo visibility based on
  155.   // whether or not they were included in the list of results.
  156.   filter.on('results', function (e) {
  157.     // First hide all the photos.
  158.     Y.all('#photos > .photo').addClass('hidden');
  159.  
  160.     // Then unhide the ones that are in the current result list.
  161.     Y.Array.each(e.results, function (result) {
  162.       result.raw.node.removeClass('hidden');
  163.     });
  164.   });
  165. });
  166. </script>
<style>
  #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: 240px;
  }
 
  #photos .photo img {
    border: 1px solid #000;
    vertical-align: top;
  }
 
  #photos .hidden { display: none; }
</style>
 
<div id="demo">
  <label for="ac-input">Filter by:</label><br>
  <input id="ac-input" type="text">
 
  <ul id="photos">
    <li class="photo" data-tags="apple, fruit">
      <a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
        <img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
      </a>
    </li>
 
    <li class="photo" data-tags="pecan">
      <a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
        <img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
      </a>
    </li>
 
    <li class="photo" data-tags="maple custard">
      <a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
        <img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
      </a>
    </li>
 
    <li class="photo" data-tags="pumpkin">
      <a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
        <img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
      </a>
    </li>
 
    <li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
      <a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
        <img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
      </a>
    </li>
 
    <li class="photo" data-tags="cherry, hearts, fruit">
      <a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
        <img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
      </a>
    </li>
 
    <li class="photo" data-tags="lattice, sour cherry, fruit">
      <a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
        <img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
      </a>
    </li>
 
    <li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
      <a href="http://www.flickr.com/photos/faerye/4283875981/">
        <img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
      </a>
    </li>
 
    <li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
      <a href="http://www.flickr.com/photos/faerye/4592482821/">
        <img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
      </a>
    </li>
 
    <li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
      <a href="http://www.flickr.com/photos/faerye/3492566166/">
        <img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
      </a>
    </li>
 
    <li class="photo" data-tags="lattice top, apple, fruit">
      <a href="http://www.flickr.com/photos/faerye/3394679580/">
        <img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
      </a>
    </li>
  </ul>
</div>
 
<script>
YUI().use("autocomplete-base", "autocomplete-filters", function (Y) {
  // Create a custom PieFilter class that extends AutoCompleteBase.
  var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
    initializer: function () {
      this._bindUIACBase();
      this._syncUIACBase();
    }
  }),
 
  // Create and configure an instance of the PieFilter class.
  filter = new PieFilter({
    inputNode: '#ac-input',
    minQueryLength: 0,
    queryDelay: 0,
 
    // Run an immediately-invoked function that returns an array of results to
    // be used for each query, based on the photos on the page. Since the list
    // of photos remains static, this saves time by not gathering the results
    // for each query.
    //
    // If the list of results were not static, we could simply set the source
    // to the function itself rather than invoking the function immediately,
    // and it would then run on every query.
    source: (function () {
      var results = [];
 
      // Build an array of results containing each photo in the list.
      Y.all('#photos > .photo').each(function (node) {
        results.push({
          node: node,
          tags: node.getAttribute('data-tags')
        });
      });
 
      return results;
    }()), // <-- Note the parens. This invokes the function immediately.
          //     Remove these to invoke the function on every query instead.
 
    // Specify that the "tags" property of each result object contains the text
    // to filter on.
    resultTextLocator: 'tags',
 
    // Use a result filter to filter the photo results based on their tags.
    resultFilters: 'phraseMatch'
  });
 
  // Subscribe to the "results" event and update photo visibility based on
  // whether or not they were included in the list of results.
  filter.on('results', function (e) {
    // First hide all the photos.
    Y.all('#photos > .photo').addClass('hidden');
 
    // Then unhide the ones that are in the current result list.
    Y.Array.each(e.results, function (result) {
      result.raw.node.removeClass('hidden');
    });
  });
});
</script>

More AutoComplete Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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