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

私にとって重要なことは、その人がツリー内の任意の変数の名前を知っている可能性があるということです。したがって、最上位の変数の名前を入力した場合、そのサブ要素の 1 つだけを表示したいのですが、サブ要素の名前を入力した場合は、そのサブ要素へのフル パスが必要です。表示されます。彼らが最上位の変数 ("person") を入力した場合、すべてのサブ要素を表示するのではなく、常に同じ文字セットで始まるものだけを表示したいと考えています。

通常のオートコンプリートとは対照的に、現在これを実行できる (構造化データでオートコンプリートを実行する方法を提供する) ライブラリはありますか?

明確化: 私が必要としているのは、オートコンプリート ライブラリに入力と出力のマップを操作するように指示する機能であると思います。これにより、「p」と入力すると入力「person」と「profession」がヒットし、返されるようになります。 "person" と "person.profession" で、"t" と入力すると、"person.title" の場合は "title"、"book.title" の場合は "title" がヒットします。

4

3 に答える 3

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

オートコンプリート jQuery-ui 機能を見てみましょう: http://jqueryui.com/autocomplete/

パラメータを使用する必要がありsourceます。APIのドキュメントを読んでください。

于 2012-11-15T07:56:24.430 に答える
-1

このObject.getOwnPropertyメソッドを使用して、オブジェクトのすべてのキーを読み取り、結果に対してオートコンプリートを実行できます。

ここでいくつかの議論 - JavaScript / jQuery でオブジェクトのプロパティを取得する方法は?

于 2012-11-15T08:21:52.643 に答える