[jQuery] Re: bassistance.de Jörn's Enhancement

[Tyron Scholem]

Attached, the files needed to execute this version.
Please let me know what do you think about it!

On Mon, Mar 9, 2009 at 13:45, Tyron <tyr...@gmail.com> wrote:

> Hello everybody,
> I made some updates on the script, mainly to include the resources
> below:
>
> - default formatResult unformats the result, keeping it text-only;
> - option bool selectButton: chooses whether the arrow for options is
> displayed or not;
> - option integer width: now resizes the input and div to match the
> size specified, even if the arrow part is displayed;
> - JQuery showDiv(): shows the result's div even if the input is not
> clicked (used by the arrow to display the results);
> - boolean menuClicked(): returns whether the click in the screen was
> in the result's div or not.
>
> The best part, in my opinion, is the second item. With this option set
> to true, the autocompleter can simulate a select box, and it seems
> very nice. Also, with the "width" option, it is not needed to create a
> new class for each instance of the input in the page.
>
> I am trying to make it the more generic possible, in order to reuse it
> many times in each page, and keeping it simple. If anybody wants the
> code, or have new ideas that would like to share with me, let me know!
>
> Best regards,
> Tyron.

jquery.autocomplete.js
Description: JavaScript source

.ac_results {
	margin-top: 1px; /*all*/
	margin-left: -2px !important; /*all*/
    _margin-left:-4px !important; /*ie8*/
    _margin-left:-2px;            /*ie6*/
    _margin-top: -2px !important; /*ieX*/

	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 1000;	
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}

.ac_loading {
	background: white url('../images/indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #0A246A;
	color: white;
}

.ac_conteiner {  
	position: relative;
	float: left;
    border    : 1px solid #a8a8a8; 
    color     : #333; 
    font-size   : 13px; 
    font-weight   : bold; 
	/*margin-bottom: 15px;*/
	height: 20px;
	/*width: 350px; */
	background-color : #e9e9e9;
}

.ac_input {
    position: absolute;
	top:0;
	left:0;
	float: left;
	text-indent:2px;
    font-size:1em;
    font-family:sans-serif;
    padding:1px;
    border: 0 !important;
    height: 16px;
    margin: 1px;
	/*width: 328px; /* ac_conteiner - ac_img - this.margin - this.padding */
	background-color: #FFF;
}


.ac_img {
	width: 18px;
	height: 20px;
	float:right;
	background: url('../images/arrow.gif');
	background-repeat: no-repeat;
	background-position: right center;
}

.ac_img:hover {
	background-color : #d9d9d9;
}

.ac_img:active {
	background-color : #c9c9c9;
}

<<attachment: arrow.gif>>

<<attachment: indicator.gif>>