YUI Library Examples: AutoComplete Control: Subset Matching

Sample Code

Data:

CSS:


1	/* custom styles for multiple stacked instances */
2	#example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
3	#example2 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
4	.autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/
5	label {color:#E76300;}
	view plain \| print \| ?

Markup:


1	<div id="autocomplete_examples">
2	<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>
3	<label for="ysearchinput1">First AutoComplete instance enables queryMatchSubset:</label>
4	<div id="example1" class="autocomplete">
5	<input id="ysearchinput1" type="text">
6	<div id="ysearchcontainer1"></div>
7	</div>
8	<label for="ysearchinput2">Second AutoComplete instance does not enable queryMatchSubset:</label>
9	<div id="example2" class="autocomplete">
10	<input id="ysearchinput2" type="text">
11	<div id="ysearchcontainer2"></div>
12	</div>
13	</div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.example.QueryMatchSubset = function(){
2	var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
3	myDataSource.responseSchema = {
4	recordDelim: "\n",
5	fieldDelim: "\t"
6	};
7	myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
8	myDataSource.maxCacheEntries = 60;
9
10	// First AutoComplete
11	var myAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1", myDataSource);
12	myAutoComp1.queryMatchSubset = true;
13
14	// Second AutoComplete
15	var myAutoComp2 = new YAHOO.widget.AutoComplete("ysearchinput2","ysearchcontainer2", myDataSource);
16
17	return {
18	oDS: myDataSource,
19	oAC1: myAutoComp1,
20	oAC2: myAutoComp2
21	}
22	}();
	view plain \| print \| ?