Войти
 
 
   
 
  
Новости Notes.ру Библиотека Биржа труда Вопрос - ответ Форум Регистрация Поиск О проекте
Разделы
О Notes
Советы
Шаблоны и примеры
Литература
Презентации
 
Всё о задаче AdminP. Часть вторая   Во второй части мы завершаем рассмотрение AdminP. В ней рассмотрены запросы междоменного администрирования и способы управления функциями AdminP с помощью настроек документа сервера, команд консоли сервера, файла Notes.ini и интервалов очистки базы данных. В этой статье предполагается, что вы опытный администратор Domino и прочитали первую часть
О Notes Читать статью
 
Всё о задаче AdminP. Proxy-действия в R5 и Domino 6   Приложение к статье об административном процессе
О Notes Читать статью
 
Всё о задаче AdminP. Часть первая   Перевод классической статьи 2003-его года о задаче административного процесса (AdminP). Очень полезна для понимания работы механизма этой задачи. В первой части статьи описаны компоненты задачи AdminP, как они работают, и как их использование помогает сделать работу администратора Domino проще. Задача AdminP (сакращённо от Administration Process, Административный процесс) работает с базой административных запросов (Administration Requests, admin4.nsf)
О Notes Читать статью
 


Шаблоны и примеры

Главная   Библиотека   Шаблоны и примеры

Как сделать автоподстановку при вводе текста

Долгоаршинных Нурислям Нуруллович
Санкт-Петербург

При вводе текста в собственных web-приложениях в Lotus Domino/Notes, в некоторых случаях возникает необходимость организовать ввод с автоподстановкой подобно тому, как это сделано при вводе поискового запроса, например в Google или иных поисковых системах.
Данная статья описывает один из возможных вариантов реализации c использованием плагина jQuery.
Для примера используем плагин, подробно описанный на сайте по адресу: http://www.linkexchanger.su/2008/39.html
Кроме того, создадим тестовую базу данных, содержащую некоторые данные. Например, используем данные из Классификатора адресов России (КЛАДР).
Требуется создать поисковую форму, в которой в тексте запроса после ввода символа появляется выпадающий список, содержащий строки со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Причем данные в примере будут браться из этой же базы.

Реализация
1. Создать поисковую форму с именем $search
<script type="text/javascript" src="<Computed Value>$files/jQuery-1.3.2.min.js"></script> 
<script type="text/javascript" src="<Computed Value>$files/jQuery.autocomplete.js"></script> 

<script>
var webDBName = '<Computed Value>';
</script  type="text/javascript">

<table width="100%" cellspacing="0" cellpadding="1" border="0" noshade>
<tr><td valign="center" bgcolor="#E1E1E1">
<font face="Sans-Serif" size="+2"><b><img alt="Search Icon" src="/icons/sv_icon.gif" border="0" align="center" hspace="7">Поиск в телефонном справочнике</b>
</td></tr>
<tr><td valign="center" bgcolor="#C0C0C0" colspan="2">
<img src="/icons/sv_dot.gif" border="0" height="2"></td></tr>

<tr><td valign="center"  colspan="1">
<font face="Sans-Serif" size="-1"><img src="/icons/sv_dot.gif" border="0" align="center" height="1">
</td></tr>
<tr><td colspan="2" align="center">

<form method="POST" action="/<Computed Value>/searchView?SearchView">
<font size ="-1">

<!--spacer-->
<table cellspacing="0" cellpadding="1" border="0" noshade >

<tr><td align="left" valign="center"><font face="Sans-Serif" size ="-1">Строка поиска:
</td><td align="left" valign="center" colspan="1"><font face="Sans-Serif" size ="-1">

<input type="submit" value="   Поиск   "  id="submitSearch">
<input type="button"  value="Очистить" onClick='$("#autocomplete").val("");' >
</td></tr>
<tr><td align="left" valign="top"><font face="Sans-Serif" size="-1">
</td><td align="left" valign="top" colspan="2"><font face="Sans-Serif" size="-1">
<INPUT TYPE="checkbox" NAME="SearchFuzzy" VALUE="TRUE" checked>Нечёткий поиск
<INPUT TYPE="checkbox" NAME="SearchWV" VALUE="TRUE" checked>Все варианты написания
</td></tr>
</table>
<!--spacer--><tr><td valign="center"><img src="/icons/sv_dot.gif" border="0" align="center" height="10"></td></tr>
<tr><td valign="center" bgcolor="#C0C0C0" colspan="2">
<img src="/icons/sv_dot.gif" border="0" height="2"></td></tr></table>
</form> Для поиска введите искомый текст в поле строка поиска и нажмите кнопку Поиск.

<img src="/icons/sv_dot.gif" border="0" align="center" height="10">
Подключаемые ресурсы
Строки :
<script type="text/javascript" src="<Computed Value>$files/jQuery-1.3.2.min.js"></script> 
<script type="text/javascript" src="<Computed Value>$files/jQuery.autocomplete.js"></script> 
подключают указанные файлы из файлового ресурса БД
Символ показывает подключение ресурса Style Sheets (CSS) с именем jQurey.autocomplete.css
Поле запроса Query должно иметь атрибут id=”autocomplete”, который будет использоваться для выбора поля в jQuery.

Сохранение имени БД осуществляется следующим JavaScript кодом:
<script>
var webDBName = '<Computed Value>';
</script  type="text/javascript">
Переменной webDBName присваивается текст с именем базы данных, сформированный формулой @WebDbName для <Computed Value>.

В событии формы onLoad задаётся код, который обеспечит активизацию плагина
// --- Автозаполнение ---
$("#autocomplete").autocomplete("/"+webDBName+"/autoComplete?openView&count=999",
{ delay:10,  
minChars: 1,
matchSubset: 1,
autoFill: true,
matchContains: 1,
cacheLength:20,
selectFirst: false,
maxItemsToShow:20,
formatItem:liFormat,
onItemSelect:selectItem
}
);

function liFormat (row, i, num) {
if  (row[0]=="<h2>No documents found</h2>") {
var result = "" ;
i=0;
num=0;
}
else var result = row[0] ;
return result;
}
function selectItem(li) {
if( li == null ) var sValue = 'А ничего не выбрано!';
if( !!li.extra ) var sValue = li.extra[2];
else var sValue = li.selectValue;
$('#submitSearch').focus();
// alert("Выбрана запись с ID: " + sValue);
}
где строка "/"+webDBName+"/autoComplete?openView&count=999" задает URL-адрес источника данных. В данном случае таким источником является собственно текущая база и представление autoComplete в частности. Подробное описание параметров плагина приведено в http://www.linkexchanger.su/2008/39.html или http://www.pengoworks.com/workshop/jquery/autocomplete.htm

2. Создать представление autoComplete для отбора данных автоподстановки
Представление autoComplete состоит из 2-х колонок.
Первая колонка заполняется в соответствии с формулой @Left(NAME;1) и категоризирована. Причем количество используемых символов должно равняться значению параметра minChars плагина- минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирован запрос.
Вторая колонка заполняется значением NAME+@char(10) и отсортирована. Name - имя поля с названием города.
Также у представления должен быть отключен заголовок и взведен флаг Treat view contents as HTML.
Все, вышесказанное, обеспечивает по URL запросу: ........../autoComplete?openView&count=999 выдачу списка для автоподстановок.

3. Создать представление searchView для осуществления поиска.
Имя поискового представления для поиска задействовано в теге:
<form method="POST" action="/<Computed Value>/searchView?SearchView">
БД должна быть проиндексирована.

4. Модификация плагина
Используемый плагин, в процессе исполнения, к заданному URL запросу добавляет собственный параметр с введенными символами. Для объединения параметров URL команды ?openView и плагина, в последнем необходимо заменить во фрагменте исходного кода плагина jQuery.autocomplete.js:
function makeUrl(q) {
var url = options.url + "?q=" + encodeURI(q);
на :
function makeUrl(q) {
var url = options.url + "&RestrictToCategory=" + encodeURI(q);
В результате URL-запрос к серверу Domino приобретет вид ........../autoComplete?openView&count=999&RestrictToCategory=%E0, где %E0 - код символа А, введенного пользователем. В ответ сервер выдаст список для автоподстановки, начинающийся на букву «А».

Результат
Для web-приложения отображается поисковая форма, в которой строка поиска может быть заполнена путем автоподстановки.


Заключение
Применение jQuery и плагинов обеспечивает широкие возможности при создании Web приложений на платформе Lotus Domino/Notes. Например, очистка поля ввода в примере реализована следующей простой строкой:
<input type="button"  value="Очистить" onClick='$("#autocomplete").val("");' >
jQuery - это библиотека JavaScript, которая позволяет менять HTML, перехватывать события, создавать анимации и добавлять интерактивность Ajax на страницы.
jQuery создана, чтобы изменить привычный путь написания JavaScript.
С помощью “надстройки” над jQuery “jQuery UI” или плагинов можно создавать красивые и удобные интерфейсы без особых проблем, в том числе и при разработке приложений в среде Lotus Domino/Notes.

Пример приложения
Скачать архив >>>
Распаковать nsf-файл.
Установить на сервер Domino.
Проиндексировать базу.
Запустить под браузером.
Примечания:
- Дизайн приложения доступен для просмотра.
- Классификатор загружен не полностью в целях уменьшения размера базы.

Как встроить в web-интерфейс панель формы аутентификации. Решение на основе Ajax-технологии с использованием jQuery >>>
 
  Опубликовано — 05/21/2009 |    

DNN, 16.02.2010 20:42:48:
Совершенно верно: плюс Chrome.
jQuery - кросс-браузерная библиотека.
см. jQuery.ru. Последняя версия 1.4

Ник Норкин, 16.02.2010 16:53:16:
Кажется, нашёл
Цитата с какого-то обсуждения:
"jQuery гарантированно поддерживает IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+"
Если информация неверная - прошу поправить

Ник Норкин, 16.02.2010 11:26:29:
Нурислям, добрый день!
Я применил твой совет - всё здорово получилось
Только...
Слушай, а с какими версиями браузеров совместим jQuery (или autocomplete)?
У меня случайно на компе оказалась Opera 7.54 - не работает
Хотелось бы оценить применимость решения с этой точки
Заранее благодарю
Ник

Автор (DNN), 21.05.2009 11:36:18:
С замечаниями полностью согласен. Спасибо! Сам всегда говорю: "Тщательнее надо писать код, тщательнее". Но ...

Александр Ерёмин, 21.05.2009 11:03:54:
0. Всегда используйте тег <base>.
1. <script type="text/javascript" src="<Computed Value>$files/jQuery-1.3.2.min.js"></script>
зачем тут $files? файлы скриптов, да и стилей (см. п.2) находятся в самой базе, достаточно писать абсолютный путь к базе. а если п.0 реализован то достаточно просто <script type="text/javascript" src="jQuery-1.3.2.min.js"></script>
2. подключение стилей, не нужен этот "колхоз" с символами :) подключайте по стандарту: "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"css/clickmenu.css\" />", да и чтобы все тип топ, файлы стилей в размешайте в Shared Resourse->Style Sheets



Добавить комментарий
Имя * :
e-mail
Комментарий * :
Код подтверждения * :


Мероприятия
Пресс-релизы
Биржа труда
Последнее на форуме
 
А так же:
Как удалить профиль?
16.04.2016 00:08:51
Скопировать в буфер поле документа
24.05.2015 08:55:52
Импорт DXL-описания документов в Lotus Domino. Одноимённые поля
16.04.2015 16:49:58
 
© LOGOSPHERE.RU