Каждый из элементов имеет атрибут class. Благодаря этому в вид виджета может с легкостью изменяться посредством CSS спосабливаться под дизайн практически любого сайта.
Разумеется, показанный здесь код HTML будет создаваться д ски средствами JavaScript и добавляться в требуемый элемент страницы.
Класс AjaxSiteSearch
Класс AjaxSiteSearch включает в себя все необходимое для о ния пользовательского интерфейса, выполнения запросов к и отображения результатов поиска, кроме таблиц CSS и другой степенной информации. Конструктор класса принимает е ный аргумент - элемент HTML, в который необходимо доб HTML, реализующий интерфейс с пользователем:
function AjaxSiteSearch(oElement) {
На первом этапе необходимо создать элементы HTML, образую нову пользовательского интерфейса. Делаться это будет, ест с помощью методов DOM:
^yar4HfiiS'.^t
^C$tiisvresult^?~nuli;
this.widgetContainer = document.createElement("div"); this, form = document,createElement('.'form"); this.textBox = document.createElementC'input"); this.submitButton = document.createElementC'input"); this.resultPane = document.сreateElement("div");
this.widgetContainer.className = "ajaxSiteSearchContainer"; this.form.className = "ajaxSiteSearchform"; this.textBox.className = "ajaxSiteSearchTextBox"; this.submitButton.className = "ajaxSiteSearchButton"; this.resultPane.className = "ajaxSiteSearchResultPane";
this. submitButton. type = ".submit" this.submitButton.value,н,"Найти"
Первая строка этого фрагмента создает переменную oThis - ссылку на текущий объект. Она пригодится позднее в этом же конструкторе. В следующих строках создаются элементы HTML, которым попутно присваиваются имена классов CSS. В заключение создается кнопка по¬иска со значениями submit и Go в атрибутах type и value соответственно.
Когда пользователь щелкает по кнопке поиска или нажимает клави¬шу Enter (когда форма обладает фокусом ввода), формой возбуждается событие onsubmit. Обработчик этого события запускает процесс поиска:
£. this.form.'onsubmit = function () { v,-.; oThis.clearResultsO; ;
return false; .

Это и есть тот самый фрагмент, где потребовалась ссылка на данный объект. Внутри обработчика события область видимости переменных изменится, и ссылка this будет уже указывать не на объект AjaxSite-Search, а на элемент . Поскольку обработчик события обращает¬ся к объекту AjaxSiteSearch, ему необходима какая-то внешняя пере¬менная, содержащая ссылку на объект, а этой цели как раз и служит переменная oThis.
В первой строке обработчик события вызывает метод clearResults(). Этот метод, который будет описан позднее, удаляет все ссылки из спи¬ска результатов, полученных на предыдущих попытках поиска. Это гарантирует, что на экране будут отображаться только те результаты, которые имеют отношение к текущему запросу. В последней строке обработчик возвращает значение false. Тем самым мы предотвращаем поведение формы по умолчанию в ответ на событие onsubmit.
Помимо этого обработчик проверяет форму. Если поле ввода ничего не содержит, то перед пользователем выводится предупреждение:
this.form.onsubmit = function () { oThis.clearResultsO;
if (oThis.textBox.value != "") {
oThis.searchO; } else {
а1ег1("Пожалуйста, введите фразу для поиска"); return false;
};
Если же поле ввода содержит некоторый текст, то вызывается метод search(). Этот метод, который вскоре будет описан, отвечает за извле¬чение фразы из поля ввода и выполнение запроса XMLHttp к серверу.
После создания всех элементов HTML и обработчика события onsubmit конструктор должен добавить элементы в документ:
this.form.appendChild(this.textBox); this.-form. apperidChild(this. submitButton); this.widgetContainer.appendChild(this;form); this.widgetContainer.appendChild(this.resultPane);
var oToAppend = (oElement)?oElement:document.body; oToAppend.appendChild(this.widgetContainer);.
Поскольку данный виджет добавляет себя в элемент HTML, въ конструктор AjaxSiteSearch лучше всего из обработчика события страницы. В противном случае к моменту вызова конструктора буемый элемент еще может отсутствовать, что вызовет ошибку ни исполнения.