JSF - функция автозаполнения для выбранных ящиков без попадания на сервер
0
Я новичок в развитии клиентской части. Хотя могут быть некоторые решения уже доступны. Позвольте мне попытаться описать мой проблемный сценарий. У меня есть JSF page (форма) JSF page которой присутствуют разные капли вниз (select boxes). Они могут быть национальности, языка или религии. Когда мы вводим код, он выбирает национальность или язык. В этом, в основном, происходит server hit goes(partial ajax request). Мой старший посоветовал мне развить эту функцию auto-complete полностью на стороне клиента. Они не хотят, чтобы на него попал сервер.
В основном они хотят, когда я ввожу какое-то значение, он загружает список предложений с конца клиента, он не должен идти на сервер. Он должен update the jsf component соответственно? Как я могу подойти к этой проблеме? Любые предложения полезны.
ТЕКУЩАЯ БАЗОВАЯ ПРОЦЕССА ЭТОТ КОД - ТАМОЖЕННЫЙ КОМПОНЕНТ
public class VisionSelectOneMenuRenderer extends InputRenderer {
@Override
public void decode(FacesContext context, UIComponent component) {
VisionSelectOneMenu menu = (VisionSelectOneMenu) component;
if (menu.isDisabled() || menu.isReadonly()) {
return;
}
decodeBehaviors(context, menu);
String clientId = menu.getClientId(context);
String value = context.getExternalContext().getRequestParameterMap().get(clientId + "_selectBox");
if (value != null) {
menu.setSubmittedValue(value);
}
}
@Override
public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
VisionSelectOneMenu menu = (VisionSelectOneMenu) component;
encodeMarkup(context, menu);
encodeScript(context, menu);
}
protected void encodeMarkup(FacesContext context, VisionSelectOneMenu menu) throws IOException {
List<SelectItem> selectItems = getSelectItems(context, menu);
String clientId = menu.getClientId(context);
boolean disabled = menu.isDisabled();
Class type = getValueType(context, menu);
String styleclass = menu.getStyleClass();
styleclass = styleclass == null ? VisionSelectOneMenu.STYLE_CLASS : VisionSelectOneMenu.STYLE_CLASS + " " + styleclass;
styleclass = disabled ? styleclass + " ui-state-disabled" : styleclass;
styleclass = "sfield";
/* writer.startElement("div", menu);
writer.writeAttribute("id", clientId, "id");
writer.writeAttribute("class", styleclass, "styleclass");
if(style != null)
writer.writeAttribute("style", style, "style"); */
encodeInput(context, menu, clientId, selectItems, type);
//encodeLabel(context, menu, selectItems, type);
//encodeMenuIcon(context, menu);
// encodePanel(context, menu, selectItems, type);
// writer.endElement("div");
}
protected void encodeInput(FacesContext context, VisionSelectOneMenu menu, String clientId, List<SelectItem> selectItems, Class type)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
String inputId = clientId + "_selectBox";
writer.startElement("div", menu);
writer.writeAttribute("class", "sfield", null);
writer.startElement("select", menu);
writer.writeAttribute("id", inputId, "id");
writer.writeAttribute("tabindex", "-1", null);
writer.writeAttribute("name", inputId, null);
//writer.writeAttribute("class", "searchableSelectLookupSelect", null);
if (menu.getOnchange() != null) {
writer.writeAttribute("onchange", menu.getOnchange(), null);
}
if (menu.isDisabled()) {
writer.writeAttribute("disabled", "disabled", null);
}
encodeSelectItems(context, menu, selectItems, type);
writer.endElement("select");
writer.startElement("input", null);
writer.writeAttribute("id", clientId, null);
//writer.writeAttribute("tabindex", "-1", null);
writer.writeAttribute("name", clientId, null);
writer.writeAttribute("type", "text", null);
writer.writeAttribute("class", "searchableSelectLookupText excludeClear", null);
if (menu.isDisabled()) {
writer.writeAttribute("disabled", "disabled", null);
}
writer.endElement("input");
writer.endElement("div");
}
protected void encodeLabel(FacesContext context, VisionSelectOneMenu menu, List<SelectItem> selectItems, Class type)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
String label = getSelectedLabel(context, menu, selectItems, type);
writer.startElement("a", null);
writer.writeAttribute("href", "#", null);
writer.writeAttribute("class", VisionSelectOneMenu.LABEL_CONTAINER_CLASS, null);
if (menu.getTabindex() != null) {
writer.writeAttribute("tabindex", menu.getTabindex(), null);
}
writer.startElement("label", null);
writer.writeAttribute("class", VisionSelectOneMenu.LABEL_CLASS, null);
if (label.equals(" ")) {
writer.write(label);
}
else {
writer.writeText(label, null);
}
writer.endElement("label");
writer.endElement("a");
}
protected void encodeMenuIcon(FacesContext context, VisionSelectOneMenu menu) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.startElement("div", menu);
//writer.writeAttribute("class", VisionSelectOneMenu.TRIGGER_CLASS, null);
writer.startElement("span", menu);
//writer.writeAttribute("class", "ui-icon ui-icon-triangle-1-s", null);
writer.endElement("span");
writer.endElement("div");
}
protected void encodePanel(FacesContext context, VisionSelectOneMenu menu, List<SelectItem> selectItems, Class type)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
boolean customContent = menu.getVar() != null;
int height = calculatePanelHeight(menu, selectItems.size());
writer.startElement("div", null);
writer.writeAttribute("id", menu.getClientId(context) + "_panel", null);
writer.writeAttribute("class", VisionSelectOneMenu.PANEL_CLASS, null);
if (height != -1) {
writer.writeAttribute("style", "height:" + height + "px", null);
}
if (customContent) {
writer.startElement("table", menu);
writer.writeAttribute("class", VisionSelectOneMenu.TABLE_CLASS, null);
writer.startElement("tbody", menu);
encodeOptionsAsTable(context, menu, selectItems, type);
writer.endElement("tbody");
writer.endElement("table");
}
else {
writer.startElement("ul", menu);
writer.writeAttribute("class", VisionSelectOneMenu.LIST_CLASS, null);
encodeOptionsAsList(context, menu, selectItems, type);
writer.endElement("ul");
}
writer.endElement("div");
}
protected void encodeOptionsAsTable(FacesContext context, VisionSelectOneMenu menu, List<SelectItem> selectItems, Class type)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
String var = menu.getVar();
List<Column> columns = menu.getColums();
Object value = menu.getValue();
for (SelectItem selectItem : selectItems) {
Object itemValue = selectItem.getValue();
Object coercedItemValue = null;
if (itemValue != null && !itemValue.equals("")) {
coercedItemValue = context.getApplication().getExpressionFactory().coerceToType(itemValue, type);
}
boolean selected = (value != null && value.equals(coercedItemValue));
context.getExternalContext().getRequestMap().put(var, selectItem.getValue());
String rowStyleClass = selected ? VisionSelectOneMenu.ROW_CLASS + " ui-state-active" : VisionSelectOneMenu.ROW_CLASS;
writer.startElement("tr", null);
writer.writeAttribute("class", rowStyleClass, null);
if (itemValue instanceof String) {
writer.startElement("td", null);
writer.writeAttribute("colspan", columns.size(), null);
writer.write(selectItem.getLabel());
writer.endElement("td");
}
else {
for (Column column : columns) {
writer.startElement("td", null);
column.encodeAll(context);
writer.endElement("td");
}
}
writer.endElement("tr");
}
context.getExternalContext().getRequestMap().put(var, null);
}
protected void encodeOptionsAsList(FacesContext context, VisionSelectOneMenu menu, List<SelectItem> selectItems, Class type)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
Object value = menu.getValue();
for (int i = 0; i < selectItems.size(); i++) {
SelectItem selectItem = selectItems.get(i);
Object itemValue = selectItem.getValue();
String itemLabel = selectItem.getLabel();
Object coercedItemValue = null;
itemLabel = isValueBlank(itemLabel) ? " " : itemLabel;
if (itemValue != null && !itemValue.equals("")) {
coercedItemValue = context.getApplication().getExpressionFactory().coerceToType(itemValue, type);
}
boolean selected = (i == 0 && value == null) || (value != null && value.equals(coercedItemValue));
String itemStyleClass = selected ? VisionSelectOneMenu.ITEM_CLASS + " ui-state-active" : VisionSelectOneMenu.ITEM_CLASS;
writer.startElement("li", null);
writer.writeAttribute("class", itemStyleClass, null);
if (itemLabel.equals(" ")) {
writer.write(itemLabel);
}
else {
writer.writeText(itemLabel, null);
}
writer.endElement("li");
}
}
protected void encodeScript(FacesContext context, VisionSelectOneMenu menu) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String clientId = menu.getClientId(context);
writer.startElement("script", null);
writer.writeAttribute("type", "text/javascript", null);
//writer.write("var selectedText = '';");
// TEXT box script
//writer.write("jQuery(document).ready(function(){$('#"+clientId+"').val($('#"+clientId+"_selectBox option:selected').text());});" +
writer.write(
"jQuery(document).ready(function(){" +
//" if($('#"+clientId+"_selectBox').is(':disabled')){ $('#"+clientId+"').attr('disabled','disabled') }" +
"$('#" + clientId + "_selectBox').focus(function(){" +
//"if(!$('#"+clientId+"_selectBox').is(':hover')){"+
// " $('#"+clientId+"').val(''); $('#"+clientId+"').focus();} "+
"});" +
"$('#" + clientId + "').val($('#" + clientId + "_selectBox option:selected').text());" +
/*"$('#"+clientId+"_selectBox option').each(function(){" +
//"var idvalue = $(this).text().split('$')[0];" +
"var level = $(this).text().split(' [')[0];" +
"var levelCode = $(this).text().split(' [')[1];" +
"var desc = level.concat('^');" +
"if(null != levelCode && typeof(levelCode)!='undefined' && levelCode.length > 0) {" +
"var subStr = levelCode.substring(0,3);" +
"desc = desc.concat(levelCode.substring(0,levelCode.length-1));" +
"$(this).attr('description',desc);" +
"}"+
//"$(this).attr('description',$(this).text());" +
//"$(this).text(idvalue);" +
"$('#"+clientId+"').val($('#"+clientId+"_selectBox option:selected').text());" +
"}" +
")});" +*/
"jQuery('#" + clientId + "').keyup(" +
"function(event){ " +
"if (event.keyCode == 13 || event.keyCode == 9) { " +
"var enteredText = $('#" + clientId + "').val();" +
"$('#" + clientId + "_selectBox > option').each(function(){" +
" var optionValue = $(this).val();" +
" var optionText = $(this).text();" +
" var optionDesc = $(this).attr('description');" +
" if(optionValue == enteredText) {" +
" $('#" + clientId + "').val(optionText);" +
" $('#" + clientId + "_selectBox').val(optionValue);" +
" }" +
" if(optionValue != 0) {" +
" var splitted = optionDesc.split('^');" +
" if(splitted[1] == enteredText.toUpperCase()) {" +
" $('#" + clientId + "').val(optionText);" +
" $('#" + clientId + "_selectBox').val(optionValue);" +
" }" +
" }" +
" " +
"});" +
"}" +// if for keycode ends
"});"
);
writer.write(
"jQuery('#" + clientId + "').click(" +
"function(){" +
"$('#" + clientId + "').val('');" +
"});"
);
/*writer.write("jQuery('#"+clientId+"').focus(" +
"function(){" +
"$('#"+clientId+"_selectBox').trigger('click');" +
"});"
);*/
writer.write(
"jQuery('#" + clientId + "').blur(" +
"function(){" +
"var enteredText = $('#" + clientId + "').val();" +
"$('#" + clientId + "_selectBox > option').each(function(){" +
" var optionValue = $(this).val();" +
" var optionText = $(this).text();" +
" var optionDesc = $(this).attr('description');" +
" if(optionValue == enteredText) {" +
" $('#" + clientId + "').val(optionText);" +
" $('#" + clientId + "_selectBox').val(optionValue);" +
" jQuery('#" + clientId + "_selectBox').trigger('change'); " +
" }" +
" if(optionValue != 0) {" +
" var splitted = optionDesc.split('^');" +
" if(splitted[1] == enteredText.toUpperCase()) {" +
" $('#" + clientId + "').val(optionText);" +
" $('#" + clientId + "_selectBox').val(optionValue); jQuery('#" + clientId + "_selectBox').trigger('change');" +
" }" +
" }" +
" " +
"});" +
" $('#" + clientId + "').val($('#" + clientId + "_selectBox option:selected').text());" +
"});"
);
//writer.write("jQuery('#"+clientId+"_selectBox').onmouseover(this.size=this.length)");
encodeClientBehaviors(context, menu);
writer.endElement("script");
}
protected void encodeClientBehaviors(FacesContext context, ClientBehaviorHolder component) throws IOException {
String script = "";
ResponseWriter writer = context.getResponseWriter();
String clientId = ((UIComponent) component).getClientId(context);
//ClientBehaviors
Map<String, List<ClientBehavior>> behaviorEvents = component.getClientBehaviors();
if (!behaviorEvents.isEmpty()) {
List<ClientBehaviorContext.Parameter> params = Collections.emptyList();
for (Iterator<String> eventIterator = behaviorEvents.keySet().iterator(); eventIterator.hasNext(); ) {
String event = eventIterator.next();
for (Iterator<ClientBehavior> behaviorIter = behaviorEvents.get(event).iterator(); behaviorIter.hasNext(); ) {
ClientBehavior behavior = behaviorIter.next();
ClientBehaviorContext cbc = ClientBehaviorContext.createClientBehaviorContext(
context,
(UIComponent) component,
event,
clientId,
params
);
script += behavior.getScript(cbc); //could be null if disabled
}
}
}
// SELECT Box scripts
writer.write(
"jQuery('#" + clientId + "_selectBox').change(" +
"function(){" +
"var selectedValue = $('#" + clientId + "_selectBox option:selected').text();" +
" $('#" + clientId + "').val(selectedValue);" + script +
"}" +
");});"
);
}
protected void encodeSelectItems(FacesContext context, VisionSelectOneMenu menu, List<SelectItem> selectItems, Class type)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
Converter converter = getConverter(context, menu);
Object value = menu.getValue();
for (SelectItem selectItem : selectItems) {
Object itemValue = selectItem.getValue();
String itemLabel = selectItem.getLabel();
String tLabel = itemLabel;
if (itemValue != null && !itemValue.equals("")) {
itemValue = context.getApplication().getExpressionFactory().coerceToType(itemValue, type);
}
writer.startElement("option", null);
writer.writeAttribute("description", tLabel, null);
writer.writeAttribute("value", getOptionAsString(context, menu, converter, itemValue), null);
if (value != null && value.equals(itemValue)) {
writer.writeAttribute("selected", "selected", null);
}
//if((Long)itemValue != 0) {
/*if((Long)itemValue == 209) {
writer.write(itemLabel + " [AFG]");
} else if((Long)itemValue == 203) {
writer.write(itemLabel + " [PAK]");
} else if((Long)itemValue == 205) {
writer.write(itemLabel + " [IND]");
} else {
writer.write(itemLabel + " [" + itemValue + "]");
}*/
/*}
else
writer.write(itemLabel);*/
//writer.write(itemLabel);
if (itemLabel.contains("^")) {
String[] formattedLabel = itemLabel.split("\\^");
itemLabel = formattedLabel[0] + " [" + formattedLabel[1] + "]" + " [" + itemValue + "]";
writer.write(itemLabel);
}
else {
if (itemValue instanceof Long) {
if ((Long) itemValue != 0) {
writer.write(itemLabel + " [" + itemValue + "]");
}
else {
writer.write(itemLabel);
}
}
else {
writer.write(itemLabel);
}
}
writer.endElement("option");
}
}
protected String getSelectedLabel(FacesContext context, VisionSelectOneMenu menu, List<SelectItem> items, Class type) {
Object value = menu.getValue();
String label = null;
for (SelectItem item : items) {
Object itemValue = item.getValue();
if (itemValue != null && !itemValue.equals("")) {
itemValue = context.getApplication().getExpressionFactory().coerceToType(item.getValue(), type);
}
if (value != null && value.equals(itemValue)) {
label = item.getLabel();
break;
}
}
if (label == null) {
label = !items.isEmpty() ? items.get(0).getLabel() : " ";
}
return label;
}
protected int calculatePanelHeight(VisionSelectOneMenu menu, int itemSize) {
int height = menu.getHeight();
if (height != Integer.MAX_VALUE) {
return height;
}
else if (itemSize > 10) {
return 200;
}
return -1;
}
@Override
public void encodeChildren(FacesContext facesContext, UIComponent component) throws IOException {
//Rendering happens on encodeEnd
}
@Override
public boolean getRendersChildren() {
return true;
}
protected Class getValueType(FacesContext context, VisionSelectOneMenu menu) {
ValueExpression ve = menu.getValueExpression("value");
Class type = ve == null ? String.class : ve.getType(context.getELContext());
return type == null ? String.class : type;
}
}
Благодарю.
1 ответ
1
Как предложил Oskars Pakers, не посещая серверную сторону, вы не сможете делать AJAX. Решение в вашем случае было бы поместить все данные на стороне клиента в теги <option>. Однако это может быть очень медленным для загрузки в зависимости от того, сколько данных у вас есть, и заставит ваш сервер генерировать ненужный код, если он ему не нужен. Если вы все еще решите это сделать, ваш лучший способ эмулировать поведение автозаполнения на стороне клиента - использовать Select2, у них также есть бриллианты, встроить функциональность AJAX, если ваш босс передумает.
Kuba
Поделиться
-
0Можем ли мы использовать этот компонент строго с AJAX и привязать значения к базовому компоненту.
-
0да, вот как я делаю это через
<p:remoteCommand>Посмотрите на пример Rotten Tomatoes
Ещё вопросы
- 1Автоматизировать установку ucbrowser
- 1StackService динамическое DTO
- 0PHP метод получения всегда 1?
- 1Google Script - Вставить столбец наследует формат
- 1курсор падает с CursorIndexOutOfBoundsException
- 0.HTACCESS - Дамп сайт от производства до разработки
- 1Как сохранить цветовую шкалу d3 с разрывом и повторным соединением ссылок
- 0Как массовое обновление в HIbernate
- 0Как передать константу в мой метод добавления класса DynamicArray
- 0Попытка объединить атрибут href и location.search
- 0Ошибка: «Ответ» не был объявлен в этой области
- 0Использование CASE в Mysql для установки значения в поле Alias
- 0Изменить цвет шрифта в таблице в зависимости от значения строки в php
- 0Mysql таблицы объектов списка в массив строк по System.arraycopy получил ArrayStoreException?
- 0Угловые атрибуты по директивам
- 0Google App Engine Python, таблица стилей не загружается
- 0Назначение аргументов командной строки для функций
- 0Выполнить код JS после завершения обратного вызова setTimeout ()
- 0Принудительно указывать улицу с помощью Google Places Autocomplete?
- 1Конвертировать декоратор в пользовательский виджет в DOJO?
- 1Android Drawable Shape с трехслойной рамкой
- 0Паспорт логин - mysql
- 0Выполнение PHP-файла из командной строки с динамическими параметрами
- 1удалить список элементов из ObservableCollection <List>, определенный DateTime
- 0преобразование даты в сокращенном формате строки в формат даты в MySQL
- 0JQuery, нажмите, чтобы увеличить изображение, затем нажмите Agian, чтобы вернуться к предыдущей ширине
- 1Создание строки из столбца панды и данных строки
- 0Как бороться с необработанным отказом SequelizeConnectionError: подключить ETIMEDOUT
- 0Я пытался сделать новостную ленту. Но есть ошибка, когда мышь уходит после наведения
- 0Можете ли вы создать ссылку, которая использует текущий URL-адрес динамически, используя Javascript?
- 0Функция Javascript для изменения стиля Div
- 1Android XML динамически устанавливает высоту полей
- 1регулярное выражение, отфильтровывающее 'N', за которым следует любая комбинация цифр
- 1Функция клиента чата Twilio Android getSubscribeedChannels () возвращает неполные каналы
- 0php msgpack_pack и как конвертировать в Unity3d C #
- 1Ограничить текстовое поле принимать цифры и буквы только в приложении магазина Windows 8
- 0Вызов C ++ (член) функционирует динамически
- 0Получение неверных данных с помощью boost :: asio socket
- 0IE7 z-index не работает событие после добавления позиции?
- 1Можно узнать, был ли модуль Python перезагружен?
- 1Как я могу измерить ширину и высоту повернутого элемента в Javascript?
- 0МОЯ SMTP-почта продолжает поступать как нежелательная
- 1Pandas DataFrame объединяет некоторые столбцы во вложенном JSON
- 1GUI - Как переключаться между панелями или фреймами при сохранении пользовательского ввода
- 1System.ServiceModel.ProtocolException: удаленный сервер возвратил неожиданный ответ: (413) слишком сложный объект запроса
- 0как удалить кнопки «одна страница», «две страницы»… «шесть страниц» в printpreviewdialog?
- 0Отрицательные биты не работают как ожидалось PHP
- 0положить элементы d3.js на слайдер
- 0Настройка списка в спящем запросе Hibernate не работает
- 0AngularJS: кнопка сфокусирована
t hit the server, itне вызов ajax. Таким образом, вы должны предоставить ВСЕ параметры до, а затем выполнить поиск на javascript на стороне клиента для соответствующих значений. Однако, если вы хотите обновить компонент jsf, я думаю, что это будет вызов ajax в любом случае на рисунке.