自動完成結構化數據

Question

我有結構化的數據，其中包含各種類型的數據。爲了簡單起見，假設我有這樣的事情：

{ 
    person : [ 
    { 
     name : 'paul', 
     title : 'prof', 
     profession : 'teacher', 
     start: '2010-10-10' 
    }, 
    { 
     name : 'joe', 
     title : 'dr', 
     profession : 'scientist', 
     start: '2000-01-01' 
    } 
    ] 
    book : [ 
    { 
     title : 'the cat in the hat' 
    } 
    ] 
} 

我想在JavaScript中的自動完成對話框，讓我選擇這些結構性元素的名稱，以便下面的結果將返回給定字母輸入：

't' : {'person.title', 'book.title'} 
'p' : {'person', 'person.profession'} 

對我來說重要的是，該人可能知道樹內任何變量的名稱。因此，如果他們輸入頂級變量的名稱，我只想顯示一個子元素而沒有子元素，但是如果他們輸入子元素的名稱，我需要該子元素的完整路徑顯示。如果他們輸入一個頂級變量（「人物」），我不想顯示所有的子元素，只有那些始終以相同字母集合開頭的子元素。

與正常的自動完成相比，當前是否有任何庫可以執行此操作（提供一種對結構化數據執行自動完成的方法）？

澄清：我想我需要的是能夠告訴自動完成庫的輸入和輸出的地圖工作，這樣鍵入「p」將最終擊中輸入「人」和從而返回「person」和「person.profession」，並在「title.title」的「person.title」和「title」中輸入「t」作爲「職業」。

Answer 1

只是寫道，遞歸某個對象以作爲數組例如檢索FULLPATH屬性名稱的功能person.title。該陣列可以與jQueryUI autocomplete功能一起使用。請看小提琴以確認這是你想要的。

小提琴here

var retrieveUniqueProps = (function () { 

    var result = []; 
    var added = {}; 

    isArray = function(o) { 
     return Object.prototype.toString.call(o) === "[object Array]"; 
    }; 

    isObject = function(o) { return typeof o === "object"; }; 

    return function (obj, parentPath) { 

     if(isArray(obj)) { 

      for(var i = 0; i < obj.length; i++) { 

       if(isArray(obj[i]) || isObject(obj[i])){ 
        retrieveUniqueProps(obj[i], parentPath); 
       } 
      } 

     } else if (isObject(obj)) { 

      for(var a in obj) { 

       if(obj.hasOwnProperty(a)) { 

        var fullpath = parentPath ? parentPath + "." + a : a; 
        if(!added[ fullpath ]) { 
         result.push(fullpath); 
         added[ fullpath ] = true; 
        } 

        if(isArray(obj[a]) || isObject(obj[a])){ 
         retrieveUniqueProps(obj[a], parentPath ? parentPath + "." + a : a); 
        } 
       } 
      } 
     } 

     return result; 
    }; 


}()); 

var uniquePropertyNames = retrieveUniqueProps(o, ""); 

UPDATE 我已經修改自動完成的源選項以篩選出來的結果按您的要求。最後一個單詞必須與您輸入到輸入中的內容匹配。檢查小提琴的更新版本。

$("#props").autocomplete({ 
    source: function(request, response) { 

       // The term the user searched for; 
       var term = request.term; 

       // Extract matching items: 
       var matches = $.grep(uniquePropertyNames, function(item, index) { 
       // Build your regex here: 
       var subArray = item.split("."); 

       if(subArray[subArray.length - 1].indexOf(term) !== 0) return false; 
       return true; 
      }); 

      // let autocomplete know the results: 
      response(matches);   
     } 
}); 

Answer 2

看看自動完成的jQuery UI的功能：http://jqueryui.com/autocomplete/

你需要使用source參數。只需閱讀api文檔。

Answer 3

您可以使用Object.getOwnProperty方法來讀取對象的所有鍵並對結果運行自動填充。

這裏的一些討論 - How to get an object's properties in JavaScript/jQuery?