How to set different width for INPUT and DIV elements with Scriptaculous Ajax.Autocompleter?
- by Grzegorz Gierlik
Hello,
I am working on autocompleter box based on Scriptaculous Ajax.Autocompleter.
Here how my HTML/JS code looks like:
<input type="text" maxlength="255" class="input iSearchInput" name="isearch_value" id="isearch" value="<wl@txt>Search</wl@txt>" onfocus="this.select()">
<br>
<div id='isearch_choices' class='iSearchChoices'></div>
<script>
function iSearchGetSelectedId(text, li) {
console.log([text, li.innerHTML].join("\n"));
document.location.href = li.getAttribute("url");
}
document.observe('dom:loaded', function() {
new Ajax.Autocompleter("isearch", "isearch_choices", "/url", {
paramName: "phrase",
minChars: 1,
afterUpdateElement : iSearchGetSelectedId
});
$("isearch_choices").setStyle({width: "320px"});
});
</script>
and CSS classes:
input.iSearchInput {
width: 155px;
height: 26px;
margin-top: 7px;
line-height: 20px;
}
div.iSearchChoices {
position:absolute;
background-color:white;
border:1px solid #888;
margin:0;
padding:0;
width: 320px;
}
It works in general, but I need to have list of choices wider then input box.
My first try was to set various width with CSS classes (like above), but it didn't work -- list of choices became as wide as input box.
According to Firebug width defined by my CSS class was overwritten by width set by element.style CSS class, which seems to be defined by Ajax.Autocompleter.
My second try was to set width for list of choices after creating Ajax.Autocompleter
$("isearch_choices").setStyle({width: "320px"});
but it didn't work too :(.
No more ideas :(.
How to set different width for list of choices for Scriptaculous Ajax.Autocompleter?
