topical media & game development

talk show tell print

professional-ajax-08-SiteSearch-js-AjaxSiteSearch.js / js



  function AjaxSiteSearch(oElement) {
          var oThis = this;
          this.result = null;
          
          this.widgetContainer = document.createElement("div");
          this.form = document.createElement("form");
          this.textBox = document.createElement("input");
          this.submitButton = document.createElement("input");
          this.resultPane = document.createElement("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 = "Go";
          
          this.form.onsubmit = function () {
                  oThis.clearResults();
                  
                  if (oThis.textBox.value != "") {
                          oThis.search();
                  } else {
                          alert("Please enter a search term");
                  }
                  return false;
          };
          
          this.form.appendChild(this.textBox);
          this.form.appendChild(this.submitButton);
          this.widgetContainer.appendChild(this.form);
          this.widgetContainer.appendChild(this.resultPane);
          
          var oToAppend = (oElement)?oElement:document.body;
      oToAppend.appendChild(this.widgetContainer);
  }
  
  AjaxSiteSearch.prototype.search = function () {
          var oThis = this;
          var sUrl = encodeURI("search.aspx?search=" + this.textBox.value);
          
          var oReq = zXmlHttp.createRequest();
          oReq.onreadystatechange = function () {
                  if (oReq.readyState == 4) {
                          // only if "OK"
                          if (oReq.status == 200) {
                                  oThis.handleResponse(oReq.responseText);
                          }
                  }
          };
          
          oReq.open("GET", sUrl, true);
          oReq.send(null);
  };
  
  AjaxSiteSearch.prototype.clearResults = function () {
          while (this.resultPane.hasChildNodes()) {
                  this.resultPane.removeChild(this.resultPane.firstChild);
          }
  };
  
  AjaxSiteSearch.prototype.handleResponse = function (sJson) {
          this.result = JSON.parse(sJson);
                  
          if (this.result.length > 0) {
                  var oFragment = document.createDocumentFragment();
                  for (var i = 0; i < this.result.length; i++) {
                          var linkResult = document.createElement("a");
                          linkResult.href = "http://yoursite.com/" + this.result[i].id;
                          linkResult.innerHTML = this.result[i].title;
                          linkResult.className = "ajaxSiteSearchLink";
                          oFragment.appendChild(linkResult);
                  }
                  
                  this.resultPane.appendChild(oFragment);
          } else {
                  alert("Your search returned no results.");
          }
  };


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.