ホーム > JSON (全3件)
  • オートコンプリートを設定する

    idがfoodのinput要素にオートコンプリートを設定する。

    /* コンプリート候補に変数を指定 */
    var foods = [ 'apple', 'blueberry', 'cherry', 'melon', 'orange' ];
    $( '#food' ).autocomplete( { source: foods } );
    
    /* コンプリート候補にURL(JSONデータ)を指定 */
    $( '#food' ).autocomplete( { source: 'http://localhost/foods.json' } );
    
    /* コンプリート候補にコールバック関数を指定 */
    $( '#food' ).autocomplete( { source: function ( req, add ) {
    	var candidacy = [];
    	for ( key in foods ) {
    		if ( foods[key].indexOf( req.term ) >= 0 )
    			candidacy.push( foods[key] );
    	}
    	add( candidacy );
    } } );
    

    初期化時、オートコンプリート候補の指定方法は配列、URL、コールバック関数の3種類になる。コールバック関数を指定した場合は、初期化時ではなく、表示する候補を更新するタイミング毎に呼び出される。なおui-menuクラスのスタイルにfloat: left;が指定されていない場合、候補リストの幅が入力ボックスよりも大きくなるので注意。
    IE7で動作しない場合はjQuery UI 1.9.1にアップデートを。

  • ajaxでJSON形式のデータを取得する

    ajaxでJSON形式のデータを取得する。

    jQuery.ajax( {
    	type: 'POST',
    	url: '/url',
    	data: 'name1=value1&name2=value2',
    	dataType: 'json',
    	success: function( dataResponse, textStatus, jqXHR ) {
    		// データ取得時の処理を
    	},
    	error: function( jqXHR, textStatus, errorThrown ) {
    		// データ取得失敗時の処理を
    	}
    } );
    

    typeには’POST’または’GET’を、dataには必要に応じて「name1=value1」の形式でパラメータを、dataTypeには’json’のほか’xml’、’html’、’text’などが指定できる。successのコールバック関数の指定はfunction( dataResponse ) {}のようにデータを受け取る変数だけでも構わない。

  • JSONテキストをパースする

    変数jsontextの内容をパースしてオブジェクトに変換する。

    try {
    	var jsonobj = jQuery.parseJSON( jsontext );
    } catch (e) {
    	// パースエラー時の対応をここで
    }

    変数の内容が正しいJSON形式でない場合は例外が発生するので、基本的にはcatchすること。