如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

 

介紹

這里所描述的過程將使你能夠創(chuàng)建一個(gè)簡單的基于jQuery / XML的解析器和搜索機(jī)制。此過程將通過一個(gè)AJAX請求檢索XML，然后在jQuery中分析數(shù)據(jù)，為搜索機(jī)制做準(zhǔn)備。該解決方案將基于不區(qū)分大小寫的全部或部分關(guān)鍵字匹配地返回結(jié)果。來自于關(guān)鍵字搜索的返回結(jié)果設(shè)置將被格式化為一個(gè)直接鏈接到相應(yīng)網(wǎng)站的超鏈接。jQuery搜索方法非常類似于Mike Endale的一個(gè)項(xiàng)目，不過增加了一個(gè)DOM解析器，正則表達(dá)式以及結(jié)果集分組。

背景

客戶端需要一個(gè)簡單的搜索工具來查找基于關(guān)鍵字搜索的本地內(nèi)部網(wǎng)站。關(guān)鍵字搜索必須不區(qū)分大小寫，并允許返回部分匹配的結(jié)果。歸咎于客戶端內(nèi)容管理系統(tǒng)的架構(gòu)，因此（SharePoint）只能執(zhí)行客戶端腳本。其解決方案的另一個(gè)障礙是，源數(shù)據(jù)將來自多個(gè)源。數(shù)據(jù)被存儲在多個(gè)Excel電子表格，CSV文件和MS Access數(shù)據(jù)庫內(nèi)。這就對我們提出了這樣的需要：開發(fā)具有一系列查詢和一個(gè)宏的Access解決方案，充當(dāng)可合并、擦洗，并最后格式化數(shù)據(jù)作為XML輸出的偽ETL。對于這個(gè)解決方案的目的，我們將詳細(xì)介紹JavaScript XML分析器的設(shè)計(jì)，而不是偽Access ETL宏工具的設(shè)計(jì)。

使用代碼

該解決方案的做法是利用一個(gè)簡單的基于JavaScript / XML的搜索來發(fā)送數(shù)據(jù)結(jié)果到HTML / JavaScript前端。前端將引用腳本：jQuery，XML和CSS文件。XML格式將因?yàn)樗目勺x性和它是數(shù)據(jù)交換行業(yè)標(biāo)準(zhǔn)格式之一的事實(shí)而被使用。 XML數(shù)據(jù)將通過使用AJAX的客戶端jQuery解析，并通過Internet Explorer 11呈現(xiàn)。

解決方案將使用RegExp對象來處理關(guān)鍵字匹配，驗(yàn)證和特殊字符處理。RegExp對象字符串將檢查危險(xiǎn)語法從而提高解決方案的穩(wěn)定性和整體可用性。

我們將默認(rèn)使用JavaScript分組功能來返回匹配結(jié)果作為折疊的紀(jì)錄集。折疊的記錄集線項(xiàng)目將被URL鏈接到相關(guān)的Project Workspace網(wǎng)站。在擴(kuò)展的組記錄集下，結(jié)果將存在于相關(guān)的子記錄中，當(dāng)通過On Click事件展開的時(shí)候。

信息架構(gòu)

解析器函數(shù)有一個(gè)復(fù)雜的帶有節(jié)點(diǎn)和屬性的層次XML樹，并且將它轉(zhuǎn)變成等價(jià)的JavaScript對象和屬性?？蛻舳嘶贘avaScript / XML的搜索需要經(jīng)過以下步驟：

1.偽ETL工具準(zhǔn)備數(shù)據(jù)到XML文件（本項(xiàng)目不包括這一步驟）

2.此XML文件加載到指定的位置（本項(xiàng)目不包括這一步驟）

3.在點(diǎn)擊事件發(fā)生時(shí)，JavaScript解析器將使用AJAX方法加載XML數(shù)據(jù)

4.檢查搜索中關(guān)鍵字的存在

• 如果沒有關(guān)鍵字存在拋出錯(cuò)誤消息“Please enter a search keyword”

5.如果有節(jié)點(diǎn)包含URL屬性的字符串，那么節(jié)點(diǎn)加入到數(shù)組中。

6.RegExp對象關(guān)鍵字通過替代匹配特殊字符處理

7.RegExp對象關(guān)鍵字匹配轉(zhuǎn)換為不區(qū)分大小寫

8.循環(huán)數(shù)組匹配基于驗(yàn)證的RegExp對象

• 如果沒有結(jié)果，那就拋出錯(cuò)誤消息“No results were found!”

9.用斑馬條紋的奇數(shù)和偶數(shù)行對組構(gòu)建結(jié)果集

10.用相關(guān)的Work Order構(gòu)建組匹配PPID行作為子組

11.填充結(jié)果，然后將它們傳遞到最后呈現(xiàn)的集合

12.顯示具有列和所有分組標(biāo)題的結(jié)果集合

• 分組在默認(rèn)情況下折疊

用戶界面

用戶界面是一個(gè)簡單的基于HTML / JavaScript客戶端搜索來返回關(guān)鍵字匹配結(jié)果——默認(rèn)為折疊和分組的記錄集合。以行項(xiàng)目顯示的折疊紀(jì)錄集合直接URL鏈接到相關(guān)項(xiàng)目的網(wǎng)站。在擴(kuò)展組記錄集合下，結(jié)果在On Click事件擴(kuò)大時(shí)將保留相關(guān)的子記錄。

內(nèi)嵌頁面引用

我們需要做的第一件事是引用我們的腳本：jQuery，XML和CSS文件。

<link rel="stylesheet" href="path/default.css" /> <script type="text/javascript" src="path/jquery-1.4.2.min.js"></script> <script id="data" type="text/javascript" src="path/search.js" xmlData="data.xml"></script> <input id="term" type="text"/> < input name="Search" id="searchButton" type="button" value="Search"/> <div id="result">< /div>

你會發(fā)現(xiàn)我們已經(jīng)添加了xmlData屬性到search.js引用。這是傳遞來自于HTML文件的XML文件位置的最佳方式。如果你有你有多個(gè)項(xiàng)目xml文件想要用作為數(shù)據(jù)源的話，那么這就很有幫助。

XML數(shù)據(jù)源

XML數(shù)據(jù)源可以以任何方式或任何大小來構(gòu)造；但建議保持源XML文件小于1 MB，以便于保持適當(dāng)?shù)姆治銎黜憫?yīng)時(shí)間。下面是XML源用于此項(xiàng)目的一個(gè)例子：

<?xml version="1.0" encoding="UTF-8"?> <dataroot generated="2015-11-20T10:30" xmlns:od="urn:schemas-microsoft-com:officedata"> <etl> <PPID Lead="Slow,Roy" Description="NORTH OF FAIR" PID="P002"> <WO Description="SHELTON - BANK (SAFETY)" PM="Slow,Roy" Status="CLOSED" WID="305577" WOXREF="SHEL" Program="REINFORCEMENT"> </WO> <Archive>Archived</Archive> <record search="P002NORTH OF FAIRSHELSHELTON 305577SHELTON - BANK (SAFETY)Slow,Roy"/> <url address="P002"/> </PPID> </etl> </dataroot>

錯(cuò)誤處理

對于這個(gè)項(xiàng)目，我們已經(jīng)在兩個(gè)關(guān)鍵領(lǐng)域使用過錯(cuò)誤處理。如果沒有關(guān)鍵字存在，那么錯(cuò)誤消息“Please enter a search keyword”將出現(xiàn)。如果沒有個(gè)結(jié)果生成，則拋出錯(cuò)誤消息“No results were found!”。

//Check if a keyword exists if (keyword == '') {
      errMsg += 'Please enter a search keyword';
    } else {
      searchThis();
    }

if (i == 0) { pub += '< div>'; pub += 'No results were found!'; pub += '< /div>';

使用jQuery AJAX請求

我們將通過預(yù)定義的能在頁面級別啟用的jQuery庫通過異步JavaScript函數(shù)調(diào)用XML。 AJAX的全稱是“異Asynchronous JavaScript and XML”，由Jesse James Garrett，Adaptive Path的創(chuàng)始人所杜撰。AJAX依賴于XMLHttpRequest，CSS，DOM和其他技術(shù)。AJAX的主要特點(diǎn)是它的“異步”性質(zhì)，這意味著它可以從服務(wù)器而無需刷新頁面來發(fā)送和接收數(shù)據(jù)。在異步模式中，客戶端和服務(wù)器會獨(dú)立地工作，以及獨(dú)立地進(jìn)行通信，從而允許用戶持續(xù)與網(wǎng)頁交互，不管服務(wù)器上發(fā)生了什么。

function searchThis() {
  $.ajax({
    type: "GET",
    url: XMLSource,
    dataType: "xml",
    success: function (xml) {
      loadPublication(xml)
    }
  });
}

使用DOM解析和正則表達(dá)式

由于jQuery本身不能解析XML字符串；我們將充分利用瀏覽器的DOM解析方法——大多數(shù)瀏覽器以這種或那種形式支持。火狐，Chrome，Safari以及的Internet Explorer瀏覽器均支持這種方法，它們都具有DOMParser對象。較早的Internet Explorer瀏覽器（如IE 8）使用其專有的ActiveX對象?？梢詣?chuàng)建跨瀏覽器的解決方案，來檢查是否缺少DOMParser，但這超出了這個(gè)項(xiàng)目的范圍，但是可能以后在額外的跨瀏覽器支持中會添加。

知道JavaScript RegExp（正則表達(dá)式）功能和語法來處理任意特殊字符。同時(shí)通過定義正則表達(dá)式來忽略大小寫，以便于在關(guān)鍵字搜索時(shí)更加友好。

function loadPublication(xmlData) {
  i = 0; var row; var searchExp = ""; var ppid = "P";

  $(xmlData).find('PPID').each(function () { // Check if a site URL attr exists if($(this).find('url').attr('address').length) { //Set the search string Variables var record          = $(this).find('record').attr('search'); var archive         = $(this).find('Archive'); //Escape characters in keyword expression and use global match RegExp.escape = function(keyword) { return keyword.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
              }; //Keyword expression will be case agnostic var exp = new RegExp(keyword, "i"); //Use formated keyword as the default search searchExp = record.match(exp); //If the search expression is not null if (searchExp != null) { //Start building the result if ((i % 2) == 0) {
              row = 'even';
              } else {
              row = 'odd';
              } if($(this).attr('PID') != ppid) {
                  ppid = $(this).attr('PID');

                  i++;

分組返回結(jié)果

用戶界面是一個(gè)簡單的基于HTML / JavaScript客戶端搜索來返回關(guān)鍵字匹配結(jié)果默認(rèn)為折疊又分組的記錄集合。以行項(xiàng)目顯示的折疊紀(jì)錄集合直接URL鏈接到相關(guān)項(xiàng)目的網(wǎng)站。在擴(kuò)展組記錄集合下，結(jié)果在On Click事件擴(kuò)大時(shí)將保留相關(guān)的子記錄。

//Grouping of the results function expgroupby(e) {
    docElts=document.all;
    numElts=docElts.length;
    images = e.getElementsByTagName("IMG");
    img=images[0];
    srcPath=img.src;
    index=srcPath.lastIndexOf("/");
    imgName=srcPath.slice(index+1); var b="auto"; if(imgName=="plus.gif"){
        b="";
        img.src="/_layouts/images/minus.gif" }else{
        b="none";
        img.src="/_layouts/images/plus.gif" }
    oldName=img.name;
    img.name=img.alt;
    spanNode=img; while(spanNode!=null){
        spanNode=spanNode.parentNode; if(spanNode!=null&&spanNode.id!=null&&spanNode.id=="wrapper")break } while(spanNode.nextSibling!=null&&spanNode.nextSibling.id!="wrapper"){
        spanNode=spanNode.nextSibling;
        spanNode.style.display=b;
    }
}

完整的源代碼

下面是這個(gè)項(xiàng)目完整的源代碼例子。

//Full source $(document).ready(function () { //Global Variables var XMLSource = $('#data').attr('xmlData'); var keyword = ''; var pub = ''; var i = 0;

  $("#searchButton").click(function () {
    keyword = $("input#term").val(); //Reset any message var errMsg = '';
    pub = ''; //Check if a keyword exists if (keyword == '') {
      errMsg += 'Please enter a search keyword';
    } else {
      searchThis();
    } if (errMsg != '') {
      pub += '< div>';
      pub += errMsg;
      pub += '< /div>';
    } //Show error $('#result').html(pub);

  }); //Use enter key to trigger the search query  $("input#term").keypress(function (e) { var key = e.which; if (key == 13){
     $("#searchButton").click(); return false;
    }
  }); function searchThis() {
    $.ajax({
      type: "GET",
      url: XMLSource,
      dataType: "xml",
      success: function (xml) {
        loadPublication(xml)
      }
    });
  } function loadPublication(xmlData) {
    i = 0; var row; var searchExp = ""; var ppid = "P";     

    $(xmlData).find('PPID').each(function () { // Check if a site URL attr exists  if($(this).find('url').attr('address').length) { var record   = $(this).find('record').attr('search'); var archive  = $(this).find('Archive'); //Escape characters in keyword expression and use global match  RegExp.escape = function(keyword) { return keyword.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                }; //Keyword expression will be case agnostic var exp = new RegExp(keyword, "i"); //Use formated keyword as the default search searchExp = record.match(exp); //If the search expression is not null if (searchExp != null) { //Start building the result if ((i % 2) == 0) {
            row = 'even';
                } else {
            row = 'odd';
                } if($(this).attr('PID') != ppid) {
                    ppid = $(this).attr('PID');

                    i++; //Grouped header row with URL links from the xml attr pub += '< tr id="wrapper"code-string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(128, 0, 128);">'">'   
    + '< td colspan="8">'
    + '< a onclick="javascript:expgroupby(this);return false;" href="javascript:">'
    + '< img name="collapse" alt="expand" src="/_layouts/images/plus.gif" border="0" />< /a>'
    + '< a href="http://project.com/sites/tp/Projects/' + $(this).find('url').attr('address') + '">' + '  ' + $(this).attr('PID')+ ' - ' + $(this).attr('Description') + ' - ' + $(this).attr('Lead') + '< /a>< /td>' + '</tr>';

    } //Bottom grouped expand detail fields pub += '<tr id="item" style="display: none;">' + '< td valign="top">' + $(this).find('WO').attr('WID') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Description') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('PM') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Status') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('WOXREF') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Program') + '< /td>' + '< td valign="top">' + $(this).find('Archive').text() + '< /td>' + '< /tr>';           
        }
    }
}); if (i == 0) {
      pub += '< div>';
      pub += 'No results were found!';
      pub += '< /div>'; //Populate the result $('#result').html(pub);
    } else { //Pass the result set showResult(pub);
    }
  } function showResult(resultSet) { //Show the result with the titles of the column fields pub = '< div>There are ' + i + ' results!< /div>';
    pub += '< table id="grid" border="0">';
    pub += '< thead>< tr>< td>< th>PPID - Project Description - Lead PM< /th>< /td>< /tr>';
    pub += '< tr>< th>WO Number< /th>';
    pub += '< th>WO Description< /th>';
    pub += '< th>Project Manager< /th>';
    pub += '< th>Status< /th>';
    pub += '< th>XRef< /th>';
    pub += '< th>Program< /th>';
    pub += '< th>Archive Status< /th>';
    pub += '< /tr>< /thead>';
    pub += '< tbody>';

    pub += resultSet;

    pub += '< /tbody>';
    pub += '< /table>'; //Populate the results $('#result').html(pub)

    $('#grid').tablesorter();
  }
}); //Grouping of the results function expgroupby(e) {
    docElts=document.all;
    numElts=docElts.length;
    images = e.getElementsByTagName("IMG");
    img=images[0];
    srcPath=img.src;
    index=srcPath.lastIndexOf("/");
    imgName=srcPath.slice(index+1); var b="auto"; if(imgName=="plus.gif"){
        b="";
        img.src="/_layouts/images/minus.gif" }else{
        b="none";
        img.src="/_layouts/images/plus.gif" }
    oldName=img.name;
    img.name=img.alt;
    spanNode=img; while(spanNode!=null){
        spanNode=spanNode.parentNode; if(spanNode!=null&&spanNode.id!=null&&spanNode.id=="wrapper")break } while(spanNode.nextSibling!=null&&spanNode.nextSibling.id!="wrapper"){
        spanNode=spanNode.nextSibling;
        spanNode.style.display=b;
    }
}

 藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)