RichFaces <rich:autocomplete>

17 Mar 2025 | 阅读 2 分钟

此组件是一个具有内置 Ajax 功能的自动完成输入框。它支持客户端建议、类似浏览器的选择以及外观和感觉的自定义。

它是一个标准的 JavaServer Faces 用户界面输入控件，具有添加的验证功能。

样式类和皮肤参数

下表包括自动完成组件的样式类（选择器）和相应的皮肤参数。

Class	函数	皮肤参数	映射的 CSS 属性
.rf-au-fnt	它用于定义自动完成框字体的样式。	generalTextColor generalFamilyFont	颜色字体系列
.rf-au-inp	它用于定义自动完成输入框的样式。	controlBackgroundColor	background-color
.rf-au-fld	它用于定义自动完成字段的样式。	panelBorderColor controlBackgroundColor	border-color background-color
.rf-au-fld-btn	它用于定义自动完成字段中按钮的样式。	无皮肤参数。
.rf-au-btn	它用于定义自动完成框按钮的样式。	panelBorderColor	左边框颜色
.rf-au-btn-arrow	它用于定义按钮箭头的样式。	无皮肤参数。
.rf-au-btn-arrow-dis	它用于定义禁用时按钮箭头的样式。	无皮肤参数。
.rf-au-lst-scrl	它用于定义自动完成列表中滚动条的样式。	无皮肤参数。
.rf-au-itm	它用于定义自动完成列表中项目的样式。	无皮肤参数。
.rf-au-itm-sel	它用于定义自动完成列表中选定项目的样式。	headerBackgroundColor generalTextColor	background-color border-color
.rf-au-shdw	它用于定义自动完成框阴影的样式。	无皮肤参数。
.rf-au-shdw-t, .rf-au-shdw-l, .rf-au-shdw-r, .rf-au-shdw-b	这些类定义了自动完成框阴影的顶部、左侧、右侧和底部的样式。	无皮肤参数。
.rf-au-tbl	它用于定义自动完成框中表格的样式。	无皮肤参数。

示例

在这里，在以下示例中，我们正在实现 <rich:autocomplete> 组件。此示例包含以下文件。

JSF 文件

// autocomplete.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>AutoComplete Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Enter Country Name "></h:outputText>
<rich:autocomplete
value="#{country.countryName}"
minChars="2"
autocompleteMethod="#{country.countryList()}"
>
</rich:autocomplete>
</h:form>
</h:body>
</f:view>
</ui:composition>

托管 Bean

// Country.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Country {
String CountryName;
public List<String> countryList() {
ArrayList<String> list = new ArrayList<>();
list.add("India");
list.add("Australia");
list.add("Germany");
list.add("Italy");
list.add("United States");
list.add("Russia");
return list;
}
public String getCountryName() {
return CountryName;
}
public void setCountryName(String CountryName) {
this.CountryName = CountryName;
}
}

输出

在这里，当我们开始输入国家/地区时，它会显示可用于自动完成的列表。

下一个主题RichFaces <rich:calender>

← 上一个下一个 →

RichFaces <rich:autocomplete>

样式类和皮肤参数

示例

JSF 文件

托管 Bean

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

RichFaces 教程

Ajax 组件

皮肤和主题

UI 组件

面试题

RichFaces <rich:autocomplete>

样式类和皮肤参数

示例

JSF 文件

托管 Bean

相关帖子

rich:fileUpload

rich:inplaceInput

rich:panel

rich:dataTable

rich:inplaceSelect

rich:tooltip

rich:tree

rich:dataScroller

rich:pickList

rich:list

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器