YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Subset Matching

# AutoComplete Control: Subset Matching

This example demonstrates AutoComplete's `queryMatchSubset` property. The first instance of AutoComplete has `queryMatchSubset` enabled for maximum cache performance such that as you type, the query is searched within previously cached results. For best results, the DataSource should return a complete set of results when a single letter is queried such that subset matching will also return a complete set of results.

The second AutoComplete instance does not enable `queryMatchSubset` so each typed letter results in a new request to the server.

View example in new window.

Note: The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return — if you type a full, highly-specifc phrase (such as your name) you'll probably get no results from the small dataset.

## First AutoComplete instance enables queryMatchSubset:

## Second AutoComplete instance does not enable queryMatchSubset:

## Sample Code

Data:

... food and drink 1924 food basic 1075 food carts 1042 ...

CSS:

/* custom styles for multiple stacked instances */ #example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */ #example2 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */ .autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/

Markup:

<div id="autocomplete_examples"> <p><strong>Note:</strong> The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return — if you type a full, highly-specifc phrase (such as your name) you'll probably get no results from the small dataset.</p> <h2>First AutoComplete instance enables queryMatchSubset:</h2> <div id="example1" class="autocomplete"> <input id="ysearchinput1" type="text"> <div id="ysearchcontainer1"></div> </div> <h2>Second AutoComplete instance does not enable queryMatchSubset:</h2> <div id="example2" class="autocomplete"> <input id="ysearchinput2" type="text"> <div id="ysearchcontainer2"></div> </div> </div>

JavaScript:

YAHOO.example.QueryMatchSubset = function(){ var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php"); myDataSource.responseSchema = { recordDelim: "\n", fieldDelim: "\t" }; myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT; myDataSource.maxCacheEntries = 60; // First AutoComplete var myAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1", myDataSource); myAutoComp1.queryMatchSubset = true; // Second AutoComplete var myAutoComp2 = new YAHOO.widget.AutoComplete("ysearchinput2","ysearchcontainer2", myDataSource); return { oDS: myDataSource, oAC1: myAutoComp1, oAC2: myAutoComp2 } }();

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### AutoComplete Control Examples:

- Basic Local Data
- Basic Remote Data
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combo Box
- Tagging Example with alwaysShowContainer
- Custom Function to Search Different Fields at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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