Javascript 自动完成结构化数据

我有结构化数据，其中包含各种类型的数据。为了简单起见，假设我有这样的东西：

{
  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'}

对我来说重要的是，这个人可能知道树中任何变量的名称。因此，如果他们键入顶级变量的名称，我只想显示其中一个子元素，而不显示任何子元素，但是如果他们键入子元素的名称，我希望显示该子元素的完整路径。如果他们输入一个顶级变量（“person”），我不想显示所有的子元素，只显示总是以同一组字母开头的子元素

目前是否有任何库可以这样做（提供一种对结构化数据进行自动完成的方法）而不是正常的自动完成

---

澄清：我想我需要的是告诉自动完成库一张输入和输出的地图，这样键入“p”将最终点击输入“person”和“Professional”，从而返回“person”和“person.Professional”，键入“t”将点击“title”代表“person.title”和“title”代表“person.title”“book.title”。

看看自动完成jQuery ui功能：

---

您需要使用

source

参数。只需阅读api文档即可。

查看自动完成jQuery ui功能：

---

您需要使用

source

参数。只需阅读api文档即可。

您可以使用

Object.getOwnProperty

方法读取对象的所有键并对结果运行自动完成

---

此处的一些讨论-

您可以使用

Object.getOwnProperty

方法读取对象的所有键，并对结果运行自动完成

---

这里的一些讨论-

刚刚编写了一个递归对象的函数，以检索完整路径属性名称作为数组，例如person.title。然后可以将该数组与功能一起使用。请查看小提琴以确认这是您想要的

小提琴

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, "" );

---

刚刚编写了一个递归对象的函数，以检索完整路径属性名称作为数组，例如person.title。然后可以将该数组与功能一起使用。请查看小提琴以确认这是您想要的

小提琴

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, "" );

---

让我澄清一下。你是说你想自动完成属性名称或其值吗？属性名称可以更好地（轻松地）提供有一个下拉列表。我不是说自动完成不能做同样的…@Pushpesh，我同意。对于非自由形式的输入下拉列表FTW。它们也有自动完成。这是一个人为的例子：下拉列表将有数百行长，因此对用户不友好。让我澄清一下。你是说你想要在属性名称或其val上自动完成吗ues？可以更好地（轻松地）提供财产名称有一个下拉列表。我不是说自动完成不能做同样的…@Pushpesh，我同意。对于非自由形式的输入下拉列表FTW。它们也有自动完成。这是一个人为的例子：下拉列表将有数百行长，因此对用户不友好。你的意思是

对象。getOwnPropertyNames

。然而，

对象。键

是更好。比较

Object.keys（[1,2,3]）

和

Object.getOwnPropertyNames（[1,2,3]）

的输出。你的意思是

Object.getOwnPropertyNames

。但是，

Object.keys

更好。比较

Object.keys（[1,2,3]）

和

Object.getOwnPropertyNames（[1,2,3]）的输出

。这是autocomplete的默认功能，而不是我想要的。我想要的结果与您的解决方案有两个主要区别：1）当我键入“p”时，我应该只看到以该字母开头的单词，而不是“anotherProp”（可能通过一些参数更改进行简单的修复）。2）我只想看到结果“person”和“person.Professional”，而不是“person.title”。@0xdabbad00我可以澄清一下吗。因此，您希望返回最后一个单词以p开头的所有条目，因为您给出的示例是类型t return person.title和book.title。这是正确的。你的办法奏效了。你太棒了！非常感谢。这项工作是为网站icebuddha.com而做的，我会确保你在这方面有所成就。这是自动完成的默认功能，而不是我想要的。我期望的结果与您的解决方案在两个主要方面不同：1）当我键入“p”时，我应该只看到以该字母开头的单词，而不是“anotherProp”（可能通过一些参数更改进行简单修复）。2） 我只想看到结果“person”和“person.profession”，而不是“person.title”。@0xdabbad00我可以澄清一下吗。因此，您希望返回最后一个单词以p开头的所有条目，因为您给出的示例是类型t return person.title和book.title。这是正确的。你的办法奏效了。你太棒了！非常感谢。这项工作是为网站icebuddha.com而做的，我会确保在这方面归功于你。