Permalink
Browse files

Mix in Options, Events, add ability to template results

  • Loading branch information...
1 parent 37bfdd8 commit 94eb4245d049f1cdbbba097f2f10a3f189e3f9a7 @kneath committed Sep 24, 2008
Showing with 98 additions and 7 deletions.
  1. +39 −7 autocompleter.js
  2. +59 −0 index.html
View
@@ -6,6 +6,14 @@
------------------------------------------------------------------------------------*/
var SelectAutoCompleter = new Class({
+ Implements: [Events, Options],
+
+ options:{
+ cutoffScore: 0.1,
+ templateAttributes: [],
+ template: "{highlightedText}"
+ },
+
select: null,
// The input element to autocomplete on
element: null,
@@ -19,8 +27,9 @@ var SelectAutoCompleter = new Class({
// Contains the current filtered terms from the quicksilver search
filteredTerms: [],
- initialize: function(select){
+ initialize: function(select, options){
this.select = $(select);
+ this.setOptions(options)
// Setup the autocompleter element
var wrapper = new Element('div', {'class': 'autocomplete'});
@@ -40,7 +49,12 @@ var SelectAutoCompleter = new Class({
// Gather the data from the select tag
this.select.getElements('option').each(function(option){
- this.data[option.get('text')] = option.value;
+ var dataItem = {}
+ this.options.templateAttributes.each(function(attr){
+ dataItem[attr] = option.getAttribute(attr);
+ });
+ this.data[option.get('text')] = $merge(dataItem, {value: option.value});
+
this.terms.push(option.get('text'));
}, this);
@@ -52,18 +66,21 @@ var SelectAutoCompleter = new Class({
this.element.set('value', '');
this.dropDown.setStyle('display', '');
this.updateTermsList();
+
+ this.fireEvent('onFocus');
},
onBlur: function(){
this.dropDown.setStyle('display', 'none');
if (this.termChosen != null){
this.element.set('value', this.termChosen);
- this.select.set('value', this.data[this.termChosen]);
+ this.select.set('value', this.data[this.termChosen].value);
}else{
this.element.set('value', $(this.select.options[this.select.selectedIndex]).get('text'));
}
+ this.fireEvent('onBlur');
},
keyListener: function(event){
@@ -129,16 +146,31 @@ var SelectAutoCompleter = new Class({
}
this.filteredTerms.each(function(scoredTerm){
- var choice = new Element('li');
- var formattedString = scoredTerm[1];
+
+ // Build the regular expression for highlighting matching terms
var regExpString = ""
letters.each(function(letter){
regExpString += letter;
});
+
+ // Build a formatted string highlighting matches with <strong>
+ var formattedString = scoredTerm[1];
var regexp = new RegExp("([" + regExpString + "])", "ig");
formattedString = formattedString.replace(regexp, "<strong>$1</strong>");
- choice.innerHTML = formattedString;
+
+ // Build the template
+ var template = {
+ highlightedText: formattedString,
+ rawText: scoredTerm[1]
+ }
+ this.options.templateAttributes.each(function(attr){
+ template["attr" + attr.capitalize()] = this.data[template.rawText][attr];
+ }, this);
+
+ // Build the output element for the dropDown
+ var choice = new Element('li');
+ choice.innerHTML = this.options.template.substitute(template);
choice.setAttribute('rawText', scoredTerm[1]);
choice.addEvent('click', function(){
@@ -154,7 +186,7 @@ var SelectAutoCompleter = new Class({
// Build the terms
this.terms.each(function(term){
var score = term.toLowerCase().score(filter.toLowerCase())
- if (score < 0.1) return;
+ if (score < this.options.cutoffScore) return;
this.filteredTerms.push([score, term]);
}, this);
View
@@ -68,5 +68,64 @@
<script type="text/javascript" charset="utf-8">
new SelectAutoCompleter('autocomplete');
</script>
+
+ <select id="autocomplete-users" class="userlist">
+ <option value="0" email="felicia@lakin.uk" avatar="http://www.gravatar.com/avatar/d3de0f5b65c85339cbe08f6fbbd388dc?s=16&d=wavatar">Meda Ankunding</option>
+ <option value="1" email="mauricio.becker@christiansengislason.info" avatar="http://www.gravatar.com/avatar/ec31a8d739174121e11c0f32405c91a6?s=16&d=wavatar">Vance Purdy</option>
+ <option value="2" email="stacey_greenfelder@borer.info" avatar="http://www.gravatar.com/avatar/9fd96f3d95a9d273400c3f2fe8599240?s=16&d=wavatar">Candida Moore I</option>
+ <option value="3" email="kolby_halvorson@rogahn.com" avatar="http://www.gravatar.com/avatar/6b3b9c7417c9ad63d59368365ebb9851?s=16&d=wavatar">Lonzo Beer</option>
+ <option value="4" email="juanita.jaskolski@gerhold.us" avatar="http://www.gravatar.com/avatar/f6ed9c7a48cc739548bd68424ffc7ec1?s=16&d=wavatar">Bernie Hahn</option>
+ <option value="5" email="wyman@jast.name" avatar="http://www.gravatar.com/avatar/6879bfc6e6308a7013f398fa813866a3?s=16&d=wavatar">Cristina Roob</option>
+ <option value="6" email="gaston_schmidt@wintheiser.ca" avatar="http://www.gravatar.com/avatar/4c8565505f0d6e266953f239aecaa1e6?s=16&d=wavatar">Maximus Jewess</option>
+ <option value="7" email="shane@mayert.name" avatar="http://www.gravatar.com/avatar/0007c94c56e6310de65938033121a3d4?s=16&d=wavatar">Leola Boyer</option>
+ <option value="8" email="dolores@moore.com" avatar="http://www.gravatar.com/avatar/a3da0138c0d995f148627b3006426f47?s=16&d=wavatar">Dalton Kuphal IV</option>
+ <option value="9" email="jerrold@hageneslarkin.biz" avatar="http://www.gravatar.com/avatar/cc54acef0f67ee418f8a78637fa64aa8?s=16&d=wavatar">Claudie Casper</option>
+ <option value="10" email="gail_rice@runte.name" avatar="http://www.gravatar.com/avatar/245763bd00ea17b16709d36fd35a24cb?s=16&d=wavatar">Ms. Josie Buckridge</option>
+ <option value="11" email="elian@mosciski.ca" avatar="http://www.gravatar.com/avatar/7466bb09b0b8044ebd8b92f66f65fadd?s=16&d=wavatar">Elouise Brekke</option>
+ <option value="12" email="devon_heathcote@croninquigley.com" avatar="http://www.gravatar.com/avatar/b64f2509ec1ca191b50f61b38dea08ee?s=16&d=wavatar">Vern Runte IV</option>
+ <option value="13" email="osborne_kertzmann@uptonruecker.us" avatar="http://www.gravatar.com/avatar/419bb1b856af785c2eb530ac35b1e7b0?s=16&d=wavatar">Marisa Deckow MD</option>
+ <option value="14" email="yasmin_bradtke@paucekgleichner.biz" avatar="http://www.gravatar.com/avatar/c924f55953e41570e22aa276eb0e3e3f?s=16&d=wavatar">Faustino Luettgen</option>
+ <option value="15" email="vincenzo_macejkovic@schroederbrakus.com" avatar="http://www.gravatar.com/avatar/c9cb5ecaddc75631365fc37e34747394?s=16&d=wavatar">Willa Wisoky</option>
+ <option value="16" email="bernice_effertz@johns.ca" avatar="http://www.gravatar.com/avatar/155e756c213d53b2fd4b8429cc542904?s=16&d=wavatar">Miss Johnpaul Bergnaum</option>
+ <option value="17" email="edison@ziemann.us" avatar="http://www.gravatar.com/avatar/0311a1a0f2dcfde3619ea333ddf2e0aa?s=16&d=wavatar">Name Brown</option>
+ <option value="18" email="stanley@hayes.info" avatar="http://www.gravatar.com/avatar/37e1b195ee0253e2d5037537522a0f9d?s=16&d=wavatar">Rosa Fay</option>
+ <option value="19" email="marian@kuvalissmitham.com" avatar="http://www.gravatar.com/avatar/15de35525852a5b6d17c7379ee655841?s=16&d=wavatar">Alana Nolan</option>
+ <option value="20" email="camylle@heller.co.uk" avatar="http://www.gravatar.com/avatar/1af0265ab8244f61a1611e4354400a19?s=16&d=wavatar">Ms. Shanie Kling</option>
+ <option value="21" email="derick@feil.ca" avatar="http://www.gravatar.com/avatar/ad0022bbe670a36cc0526da2e6ded6c5?s=16&d=wavatar">Jazmin Considine</option>
+ <option value="22" email="isabell_hodkiewicz@kohlersatterfield.uk" avatar="http://www.gravatar.com/avatar/08f6015fc508000efb8f4811ff7d6903?s=16&d=wavatar">Reilly Bins</option>
+ <option value="23" email="guiseppe_glover@gorczanycruickshank.ca" avatar="http://www.gravatar.com/avatar/cd2de90d54084741be925aaba26ee3b6?s=16&d=wavatar">Lavon Rolfson</option>
+ <option value="24" email="chris@lemke.biz" avatar="http://www.gravatar.com/avatar/7a839b3d6740817903e8a173499505a7?s=16&d=wavatar">Albin Ward</option>
+ <option value="25" email="clovis_auer@howe.biz" avatar="http://www.gravatar.com/avatar/30c469791857ee5c205226eeb6ea605a?s=16&d=wavatar">Darron Rodriguez DDS</option>
+ <option value="26" email="jewell@robertsstoltenberg.name" avatar="http://www.gravatar.com/avatar/932ac5383c8c177a3f51913acfa36f01?s=16&d=wavatar">Darlene Bogisich</option>
+ <option value="27" email="kailee@windlerhilll.info" avatar="http://www.gravatar.com/avatar/02d41b10ad27495a0d7b5cf6e69c4569?s=16&d=wavatar">Tyra Hessel</option>
+ <option value="28" email="enoch@terryborer.name" avatar="http://www.gravatar.com/avatar/3f01c0fb55c63e945b13fd8edc7716c5?s=16&d=wavatar">Alia Reynolds</option>
+ <option value="29" email="gerson.auer@conn.name" avatar="http://www.gravatar.com/avatar/f6e14d17675bbe98cb39f45fe303f482?s=16&d=wavatar">Brionna Wyman Jr.</option>
+ <option value="30" email="sage_olson@howell.com" avatar="http://www.gravatar.com/avatar/068c5648014509df38603ad8b641ee67?s=16&d=wavatar">Nella Jewess</option>
+ <option value="31" email="jenifer@haaglubowitz.com" avatar="http://www.gravatar.com/avatar/b1b9a67e763794436596710e1d51b77a?s=16&d=wavatar">Ottis Tillman</option>
+ <option value="32" email="javonte.shanahan@jaskolski.com" avatar="http://www.gravatar.com/avatar/d9c7da069d8133f55f1cf5b5102134da?s=16&d=wavatar">Zechariah DuBuque</option>
+ <option value="33" email="justyn@greenfelderorn.info" avatar="http://www.gravatar.com/avatar/9d0f884b5ee2d1ac5c96f8c8a00f0cbf?s=16&d=wavatar">Jewel McDermott</option>
+ <option value="34" email="bryon.prohaska@west.us" avatar="http://www.gravatar.com/avatar/5224d2af46b8705cbaabb9143ddc130e?s=16&d=wavatar">Amos Stroman</option>
+ <option value="35" email="seth@graham.biz" avatar="http://www.gravatar.com/avatar/8703cacba66842e5443c83ba6330d128?s=16&d=wavatar">D'angelo Reilly V</option>
+ <option value="36" email="leanna@schillernitzsche.co.uk" avatar="http://www.gravatar.com/avatar/fedd2a62fd4a29b69b87b4396b1d5fc4?s=16&d=wavatar">Reuben Fritsch</option>
+ <option value="37" email="derrick.christiansen@feilturcotte.name" avatar="http://www.gravatar.com/avatar/6e5a33b6a1da1ab008164c9c7e25fabf?s=16&d=wavatar">Geraldine Fay</option>
+ <option value="38" email="alyson@bogisichorn.name" avatar="http://www.gravatar.com/avatar/446b312aca42f3ad682b89a668e7b7fe?s=16&d=wavatar">Erik Wiza</option>
+ <option value="39" email="derick.doyle@purdyterry.us" avatar="http://www.gravatar.com/avatar/77b3d8ce87d2095a93a64e205654fcea?s=16&d=wavatar">Narciso Kautzer</option>
+ <option value="40" email="darron_haag@batz.biz" avatar="http://www.gravatar.com/avatar/0ef59982a8c796777d0aab8d1684e156?s=16&d=wavatar">Celia Predovic</option>
+ <option value="41" email="berenice_graham@steuber.com" avatar="http://www.gravatar.com/avatar/2f0e5ea17692be49f89c2d4a540c4b2b?s=16&d=wavatar">Aglae Nikolaus Jr.</option>
+ <option value="42" email="william.larson@lockmanmurazik.info" avatar="http://www.gravatar.com/avatar/e9a75e6a99f63014da353841d0a6e965?s=16&d=wavatar">Angela D'Amore</option>
+ <option value="43" email="morgan@weimann.us" avatar="http://www.gravatar.com/avatar/745c92bc857dd33b681a7cacb84de526?s=16&d=wavatar">Meta Parker</option>
+ <option value="44" email="bailey_crona@kuhn.info" avatar="http://www.gravatar.com/avatar/16fdaadb17babfdb4ca102b955684661?s=16&d=wavatar">Rosa Sipes</option>
+ <option value="45" email="nikki@littel.us" avatar="http://www.gravatar.com/avatar/587097e60075135d0c0413e0c2694701?s=16&d=wavatar">Luis Raynor</option>
+ <option value="46" email="marcus@kunde.info" avatar="http://www.gravatar.com/avatar/04d39e64c355540ced409f5ac4747b16?s=16&d=wavatar">Richmond Mraz</option>
+ <option value="47" email="juanita.bechtelar@romaguera.name" avatar="http://www.gravatar.com/avatar/d96cc6c9f230e10307b56b3a373585e7?s=16&d=wavatar">Randy Hintz</option>
+ <option value="48" email="maximo_kihn@mitchell.name" avatar="http://www.gravatar.com/avatar/c2aad47fb1a7fee774f0f0b72cfe7489?s=16&d=wavatar">Kailyn Balistreri</option>
+ <option value="49" email="teresa@bergstrom.co.uk" avatar="http://www.gravatar.com/avatar/7786974ec12a4a8683de4b5e668757fc?s=16&d=wavatar">Mrs. Floy Haag</option>
+ </select>
+ <script type="text/javascript" charset="utf-8">
+ new SelectAutoCompleter('autocomplete-users', {
+ templateAttributes: ["email", "avatar"],
+ template: '<img src="{attrAvatar}" alt="{rawText}" class="avatar" /> <h5>{highlightedText}</h5> <p>{attrEmail}</p>'
+ });
+ </script>
</body>
</html>

0 comments on commit 94eb424

Please sign in to comment.