自动完成结构化数据

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?