Well, I was asked to do a suggesting text-box for one field in the UI so that it would be easier to type in the info which apparently is the one they make most of the errors. I did it with some script.aculo.us love. It’s nice that they have pretty good docs.
So basically what you have to do is include
<head>
...
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
...
</head>
Then add
<label for="signum">Signum</label>
<input id="signum" name="item[signum]" type="text" />
<div id="signumhint" class="signumhint"></div>
<script type="text/javascript">
// <![CDATA[
new Ajax.Autocompleter("signum","signumhint","AjaxController.php?get=signum", {})
// ]]>
</script>
Then add process the request, this is from my AjaxController.class.php draft
function handleRequest($post, $get) {
if(count($post) <= 0 && count($get) <= 0) {
return null;
}
if($post['item']['signum'] != null) {
$signums = $this->getSignums($post['item']['signum']);
}
$this->makeUnorderedList($signums);
$this->printList($signums);
}
function makeUnorderedList($results) {
$unorderedList = Array();
$unorderedList[] = '<ul>';
foreach($results as $result) {
$unorderedList[] = '<li>'.$result.'</li>';
}
$unorderedList[] = '</ul>';
return $unorderedList;
}
function printList($unorderedListArray) {
foreach($unorderedListArray as $item) {
print $item;
}
}
You also need to edit your css so that the hints div will look nice. It’ll be populated data. In here the hints field css looks like this:
.signumhint {
position: absolute;
font-size: 0.8em;
background-color: white;
left: 8em;
z-index: 100;
}
.signumhint ul {
list-style-type:none;
margin:0px;
padding:0px;
}
.signumhint ul li.selected { background-color: #ffb;}
.signumhint ul li {
list-style-type:none;
display:block;
margin:0;
padding:0;
height:32px;
cursor:pointer;
}
And voila, you’re good to go.
