converted to a plugin

Author: gabehollombe

index.html

@@ -9,62 +9,12 @@
 
 	<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
 	<script type="text/javascript" src="jquery.autocomplete.js"></script>
+	<script type="text/javascript" src="jquery.select-autocomplete.js"></script>
 	<script type="text/javascript">
 	$(document).ready(function() {
-  	init_autocomplete_selects();
+  	$('select.autocomplete').select_autocomplete();
   });
-  
-  function init_autocomplete_selects() {
-  	//iterate over each autocomplete select
-  	$('select.autocomplete').each(function() {
-  		//stick each of it's options in to an items array of objects with name and value attributes 
-  		var select = this;
-  		var items = [];		
-  		$(select).children('option').each(function(){
-  			var item = $(this);
-  			if (item.val() != '') //ignore empty value options
-  			{
-  				var name = item.html();
-  				var value = item.val();
-  				items.push( {'name':name, 'value':value} );
-  			}
-  		});
-
-  		//make a new input box next to the select list
-  		var input = $("<input type='text' />").appendTo('body');
-  		$(select).after(input);
-
-  		//make the input box into an autocomplete for the select items
-  		$(input).autocomplete(items, {  		
-  		  data: items,	
-  			minChars: 0,
-  			width: 310,
-  			matchContains: false,
-  			autoFill: false,
-  			formatItem: function(row, i, max) {
-  				return row.name;
-  			},
-  			formatMatch: function(row, i, max) {
-  				return row.name;
-  			},
-  			formatResult: function(row) {
-  				return row.name;
-  			}
-  		});
-
-  		//make the result handler set the selected item in the select list
-  		$(input).result(function(event, selected_item, formatted) { 
-  			var to_be_selected = $(select).find("option[value=" + selected_item.value + "]")[0];
-  			$(to_be_selected).attr('selected', 'selected');
-  		});
-  		
-  		//set the initial text value of the autocomplete input box to the text node of the selected item in the select control
-  		$(input).val($(select).find(':selected').text());
-
-  		//normally, you'd hide the select list but we won't for this demo
-  		//$(select).hide();
-  	});
-  }
+   
 	</script>
 </head>
 

jquery.select-autocomplete.js

@@ -0,0 +1,52 @@
+jQuery.fn.select_autocomplete = function() {
+  return this.each(function(){
+		if (this.tagName.toLowerCase() != 'select') { return; }
+	
+    //stick each of it's options in to an items array of objects with name and value attributes 
+    var select = this;
+    var items = [];    
+    $(select).children('option').each(function(){
+      var item = $(this);
+      if (item.val() != '') //ignore empty value options
+      {
+        var name = item.html();
+        var value = item.val();
+        items.push( {'name':name, 'value':value} );
+      }
+    });
+
+    //make a new input box next to the select list
+    var input = $("<input type='text' />").appendTo('body');
+    $(select).after(input);
+
+    //make the input box into an autocomplete for the select items
+    $(input).autocomplete(items, {      
+      data: items,  
+      minChars: 0,
+      width: 310,
+      matchContains: false,
+      autoFill: false,
+      formatItem: function(row, i, max) {
+        return row.name;
+      },
+      formatMatch: function(row, i, max) {
+        return row.name;
+      },
+      formatResult: function(row) {
+        return row.name;
+      }
+    });
+
+    //make the result handler set the selected item in the select list
+    $(input).result(function(event, selected_item, formatted) { 
+      var to_be_selected = $(select).find("option[value=" + selected_item.value + "]")[0];
+      $(to_be_selected).attr('selected', 'selected');
+    });
+
+    //set the initial text value of the autocomplete input box to the text node of the selected item in the select control
+    $(input).val($(select).find(':selected').text());
+
+    //normally, you'd hide the select list but we won't for this demo
+    $(select).hide();
+  });
+};