(function($) {

$.fn.select_autocomplete = function(options) {

	// make sure we have an options object
	options = options || {};



// setup our defaults
var defaults = {
	minChars: 0
	, width: 310
	, showremovebutton:false
	, onSelect:  function() {
		return "";
	}
	, matchContains: true
	, autoFill: false
	, formatItem: function(row, i, max) {
		return row.name;
	}
	, formatMatch: function(row, i, max) {
		return row.name;
	}
	, formatResult: function(row) {
		return row.name;
	}
};

options = $.extend(defaults, options);

return this.each(function() {

//stick each of it's options in to an items array of objects with name and value attributes
var $this = $(this),
data = [],
$input = $('<input type="text" id="input'+$this[0].id+'" title="'+$this[0].title+'"/>');
var estilImg = "style=\"cursor:pointer;margin-left:5px;display:none;\"";
//if(defaults.showremovebutton) estilImg = "";
$imginput = $('<img id="img'+$this[0].id+'" ' + estilImg + '  src="img/deleteinput.png"/>');



if (this.tagName.toLowerCase() != 'select') {return; }


$this.children('option').each(function() {

var $option = $(this);

if ($option.val() != 'Totes' && $option.val() != 'Tots' &&  $option.val() != '') { //ignore empty value options

data.push({
name: $option.html()
, value:$option.val()
});
}
});

// insert the input after the select
$this.after($imginput);
$this.after($input);


// add it our data
options.data = data;

//make the input box into an autocomplete for the select items
$input.autocomplete(data, options);

		//make the result handler set the selected item in the select list
		$input.result(function(event, selected_item, formatted) {
			try{
				$($this.find('option[value=' + selected_item.value + ']')[0]).attr('selected', true);
				defaults.onSelect();
				$("#img"+$this[0].id+"").fadeIn("slow");
			}catch(ex){
				alert(ex.message);
			}
		});

      $input.blur(function(){
          // autocomplete has removed blank options
          // ensure that if value is removed we select the blank option if available
          if(this.value == ""){
           // $($this.find('option[value=]')[0]).attr('selected', true);
          }

          /* failsafe to ensure text box always represents the value being used in the select
* there are edge cases where if you leave the field part way through the word, or clear the value when no blank option is available
* that force a mismatch between the 2 elements
*/
          if(this.value != $this[0].options[$this[0].selectedIndex].text && this.value.length > 0){
            $input.val($this[0].options[$this[0].selectedIndex].text);
          }
      });

//set the initial text value of the autocomplete input box to the text node of the selected item in the select control
$input.val($this[0].options[$this[0].selectedIndex].text);

$imginput.click(
	function(){
		$($this.find('option[value=-1]')[0]).attr('selected', true);
		$input.val("");
		$this.autocomplete("search");
		$("#img"+$this[0].id+"").fadeOut("normal");
		defaults.onSelect();
	}
);

//normally, you'd hide the select list but we won't for this demo
$this.hide();
});
};
  
})(jQuery);