YUI 3.x Home -

YUI Library Examples: AutoComplete: Tag Completion using Query Delimiters

AutoComplete: Tag Completion using Query Delimiters

This example demonstrates how to use the queryDelimiter config, a custom result filter, and a couple of event handlers to provide suggestions as a user enters tags in an input field. The result list is prepopulated with suggested tags and is displayed immediately when the input field receives focus rather than waiting for the user to begin typing.

View example in new window.


HTML

  1. <div id="demo">
  2.   <label for="ac-input">Tags:</label><br>
  3.   <input id="ac-input" type="text">
  4. </div>
<div id="demo">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div>

JavaScript

Tags Array

While a remote result source could also be used, in this example we'll use the following local array of suggested tags to keep things simple: 

  1. var tags = [
  2.   'css',
  3.   'css3',
  4.   'douglas crockford',
  5.   'ecmascript',
  6.   'html',
  7.   'html5',
  8.   'java',
  9.   'javascript',
  10.   'json',
  11.   'mootools',
  12.   'node.js',
  13.   'pie',
  14.   'yui'
  15. ];
var tags = [
  'css',
  'css3',
  'douglas crockford',
  'ecmascript',
  'html',
  'html5',
  'java',
  'javascript',
  'json',
  'mootools',
  'node.js',
  'pie',
  'yui'
];

Implementation

  1. YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  2.   var inputNode = Y.one('#ac-input');
  3.  
  4.   inputNode.plug(Y.Plugin.AutoComplete, {
  5.     activateFirstItem: true,
  6.     allowTrailingDelimiter: true,
  7.     minQueryLength: 0,
  8.     queryDelay: 0,
  9.     queryDelimiter: ',',
  10.     source: tags,
  11.     resultHighlighter: 'startsWith',
  12.  
  13.     // Chain together a startsWith filter followed by a custom result filter
  14.     // that only displays tags that haven't already been selected.
  15.     resultFilters: ['startsWith', function (query, results) {
  16.       // Split the current input value into an array based on comma delimiters.
  17.       var selected = inputNode.ac.get('value').split(/\s*,\s*/);
  18.  
  19.       // Pop the last item off the array, since it represents the current query
  20.       // and we don't want to filter it out.
  21.       selected.pop();
  22.  
  23.       // Convert the array into a hash for faster lookups.
  24.       selected = Y.Array.hash(selected);
  25.  
  26.       // Filter out any results that are already selected, then return the
  27.       // array of filtered results.
  28.       return Y.Array.filter(results, function (result) {
  29.         return !selected.hasOwnProperty(result.text);
  30.       });
  31.     }]
  32.   });
  33.  
  34.   // When the input node receives focus, send an empty query to display the full
  35.   // list of tag suggestions.
  36.   inputNode.on('focus', function () {
  37.     inputNode.ac.sendRequest('');
  38.   });
  39.  
  40.   // After a tag is selected, send an empty query to update the list of tags.
  41.   inputNode.ac.after('select', function () {
  42.     inputNode.ac.sendRequest('');
  43.     inputNode.ac.show();
  44.   });
  45. });
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var inputNode = Y.one('#ac-input');
 
  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: ',',
    source: tags,
    resultHighlighter: 'startsWith',
 
    // Chain together a startsWith filter followed by a custom result filter
    // that only displays tags that haven't already been selected.
    resultFilters: ['startsWith', function (query, results) {
      // Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get('value').split(/\s*,\s*/);
 
      // Pop the last item off the array, since it represents the current query
      // and we don't want to filter it out.
      selected.pop();
 
      // Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);
 
      // Filter out any results that are already selected, then return the
      // array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });
 
  // When the input node receives focus, send an empty query to display the full
  // list of tag suggestions.
  inputNode.on('focus', function () {
    inputNode.ac.sendRequest('');
  });
 
  // After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after('select', function () {
    inputNode.ac.sendRequest('');
    inputNode.ac.show();
  });
});

Complete Example Source

  1. <div id="demo">
  2.   <label for="ac-input">Tags:</label><br>
  3.   <input id="ac-input" type="text">
  4. </div>
  5.  
  6. <script>
  7. YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  8.   var inputNode = Y.one('#ac-input'),
  9.       tags = [
  10.         'css',
  11.         'css3',
  12.         'douglas crockford',
  13.         'ecmascript',
  14.         'html',
  15.         'html5',
  16.         'java',
  17.         'javascript',
  18.         'json',
  19.         'mootools',
  20.         'node.js',
  21.         'pie',
  22.         'yui'
  23.       ];
  24.  
  25.     inputNode.plug(Y.Plugin.AutoComplete, {
  26.       activateFirstItem: true,
  27.       allowTrailingDelimiter: true,
  28.       minQueryLength: 0,
  29.       queryDelay: 0,
  30.       queryDelimiter: ',',
  31.       source: tags,
  32.       resultHighlighter: 'startsWith',
  33.  
  34.       // Chain together a startsWith filter followed by a custom result filter
  35.       // that only displays tags that haven't already been selected.
  36.       resultFilters: ['startsWith', function (query, results) {
  37.         // Split the current input value into an array based on comma delimiters.
  38.         var selected = inputNode.ac.get('value').split(/\s*,\s*/);
  39.  
  40.         // Pop the last item off the array, since it represents the current query
  41.         // and we don't want to filter it out.
  42.         selected.pop();
  43.  
  44.         // Convert the array into a hash for faster lookups.
  45.         selected = Y.Array.hash(selected);
  46.  
  47.         // Filter out any results that are already selected, then return the
  48.         // array of filtered results.
  49.         return Y.Array.filter(results, function (result) {
  50.           return !selected.hasOwnProperty(result.text);
  51.         });
  52.       }]
  53.     });
  54.  
  55.     // When the input node receives focus, send an empty query to display the full
  56.     // list of tag suggestions.
  57.     inputNode.on('focus', function () {
  58.       inputNode.ac.sendRequest('');
  59.     });
  60.  
  61.     // After a tag is selected, send an empty query to update the list of tags.
  62.     inputNode.ac.after('select', function () {
  63.       inputNode.ac.sendRequest('');
  64.       inputNode.ac.show();
  65.     });
  66. });
  67. </script>
<div id="demo">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div>
 
<script>
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var inputNode = Y.one('#ac-input'),
      tags = [
        'css',
        'css3',
        'douglas crockford',
        'ecmascript',
        'html',
        'html5',
        'java',
        'javascript',
        'json',
        'mootools',
        'node.js',
        'pie',
        'yui'
      ];
 
    inputNode.plug(Y.Plugin.AutoComplete, {
      activateFirstItem: true,
      allowTrailingDelimiter: true,
      minQueryLength: 0,
      queryDelay: 0,
      queryDelimiter: ',',
      source: tags,
      resultHighlighter: 'startsWith',
 
      // Chain together a startsWith filter followed by a custom result filter
      // that only displays tags that haven't already been selected.
      resultFilters: ['startsWith', function (query, results) {
        // Split the current input value into an array based on comma delimiters.
        var selected = inputNode.ac.get('value').split(/\s*,\s*/);
 
        // Pop the last item off the array, since it represents the current query
        // and we don't want to filter it out.
        selected.pop();
 
        // Convert the array into a hash for faster lookups.
        selected = Y.Array.hash(selected);
 
        // Filter out any results that are already selected, then return the
        // array of filtered results.
        return Y.Array.filter(results, function (result) {
          return !selected.hasOwnProperty(result.text);
        });
      }]
    });
 
    // When the input node receives focus, send an empty query to display the full
    // list of tag suggestions.
    inputNode.on('focus', function () {
      inputNode.ac.sendRequest('');
    });
 
    // After a tag is selected, send an empty query to update the list of tags.
    inputNode.ac.after('select', function () {
      inputNode.ac.sendRequest('');
      inputNode.ac.show();
    });
});
</script>

More AutoComplete Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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