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

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

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

澄清：我想我需要的是能够告诉自动完成库一个输入和输出的地图，以便输入＆＃34; p＆＃34;将最终打击输入＆＃34; person＆＃34;和＆＃34;专业＆＃34;然后返回＆＃34; person＆＃34;和＆＃34; person.profession＆＃34;，并打字＆＃34; t＆＃34;击中＆＃34; title＆＃34;为＆＃34; person.title＆＃34;和＆＃34;标题＆＃34; for＆＃34; book.title＆＃34;。

Answer 1

查看自动完成jQuery-ui功能：http://jqueryui.com/autocomplete/

您需要使用source参数。请阅读api文档。

Answer 2

刚刚编写了一个函数，该函数对一个对象进行递归，以将完整路径属性名称检索为数组，例如 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, "" );

<强>更新我修改了自动完成的源选项，以根据您的要求过滤掉结果。最后一个单词必须与输入的内容相匹配。查看更新版本的小提琴。

 $("#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 3

您可以使用Object.getOwnProperty方法读取对象的所有键并对结果运行自动完成。

这里有一些讨论 - How to get an object's properties in JavaScript / jQuery?

自动填充结构化数据

3 个答案: