Hello,
I am working on autocompleter box based on Scriptaculous Ajax.Autocompleter.
It works in general, but I need to have list of choices wider (see image -- green line -- 320px) then input box (see image -- red line -- 155px).
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?
Below there is complete example of code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<style>
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;
}
div.iSearchChoices ul {
list-style-type:none;
margin:0;
padding:0;
}
div.iSearchChoices ul li.selected { background-color: #ffb;}
div.iSearchChoices ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
border-bottom: 1px dotted #929292;
}
</style>
</head>
<body>
<input type="text" maxlength="255" class="input iSearchInput" name="isearch_value" id="isearch" value="Search" onfocus="this.select()">
<br>
<div id='isearch_choices' class='iSearchChoices'></div>
</script>
</body>
<script>
function iSearchGetSelectedId(text, li) {
console.log([text, li.innerHTML].join("\n"));
document.location.href = li.getAttribute("url");
}
document.observe('dom:loaded', function() {
try {
new Ajax.Autocompleter("isearch", "isearch_choices", "/url", {
paramName: "phrase",
minChars: 1,
afterUpdateElement : iSearchGetSelectedId
});
}
catch (ex) {
alert(ex);
}
$("isearch_choices").setStyle({width: "320px"});
});
</script>
</html>
And link to image with its result.