New Components in Mojarra Scales: Part II – sc:autoComplete
Tuesday, December 22, 2009 |In Part I, I introduced the new YUI-backed Scales dataTable component. In this installment in the series, we"ll take a look at another new component available in Scales 2.0, sc:autoComplete.
The auto-complete component is likely very familiar to most seasoned web users. As information is typed into a field on the form, suggestions are displayed in a box that appears below the input field. The user is then free to select one of these options or to continue entering his value of choice. To put such a component on the web page using Mojarra Scales, a component similar to the following can be used:
1
2
3
4
<sc:autocomplete animate="both" id="autoComplete"
suggestions="#{autoCompleteBean.autoCompleteValues}"
typeAhead="true" value="#{autoCompleteBean.value}"
width="300px"/>
This example will create an input that is 300 pixels wide, has a suggestion box whose appearance is animated in both directions, and allows type ahead — meaning the component will auto-fill the field with the first result, allowing the user to tab away to automatically select that value or continue typing. The ValueExpression suggestions is what the component uses to retrieve the appropriate set of suggestions. In our simple example, the implementation looks like this:
1
2
3
4
5
6
7
8
9
public List autoCompleteValues(String query) {
List values = new ArrayList();
for (String word : words) {
if (word.startsWith(query)) {
values.add(word);
}
}
return values;
}
Elsewhere in the bean, we have a static String[] with all of the possible values. We then iterate over this list, finding words that start with the value the user has entered. For each hit, we that to a List, which we then return to the client. It"s probably not the most efficient implementation, but should serve to demonstrate the use.
On the page, this component will look something like this:
In the next installment, we"ll take a look at two image components, sc:imageZoomer and sc:lightbox. Until then, please feel free to experiment with sc:autoComplete. If you notice any bugs or deficiencies, or if there"s a feature you"d like to see, please feel free to file an issue.
My name is Jason Lee. I am a software developer living in the middle of Oklahoma. I’ve been a professional developer since 1997,
using a variety of languages, including Java, Javascript, PHP, Python, Delphi, and even a bit of C#. I currently work for Red Hat
on the WildFly/EAP team, where, among other things, I maintain integrations for some MicroProfile specs, OpenTelemetry, Micrometer,
Jakarta Faces, and Bean Validation. (Full resume 