1

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

{
  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”，输入“t”会命中“person.title”的“title”和“book.title”的“title”。

4

3 回答 3

1

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

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

于 2012-11-15T07:56:24.430 回答
1

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

在这里提琴

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);        
        }
});
于 2012-11-15T11:40:49.070 回答
-1

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

这里有一些讨论 -如何在 JavaScript / jQuery 中获取对象的属性？

于 2012-11-15T08:21:52.643 回答