GHWEB06.GRASSHOPPER

$(function() {
	$('#search').val('');
	var vegetable = [
		{'name':'オクラ','area':'アフリカ北東部','season':'夏'},
		{'name':'キュウリ','area':'インド西部','season':'夏'},
		{'name':'ゴーヤ','area':'東南アジア','season':'夏'},
		{'name':'トマト','area':'南米アンデス高原地帯','season':'夏'},
		{'name':'ナス','area':'インド東部','season':'夏'},
		{'name':'ピーマン','area':'中南米','season':'夏'},
    	{'name':'トウモロコシ','area':'南米北部','season':'夏'},
    	{'name':'カボチャ','area':'中南米','season':'秋'},
    	{'name':'スイカ','area':'アフリカ','season':'夏'},
    	{'name':'ショウガ','area':'熱帯アジア原産','season':'秋'}
	];
	var list = "";
	for(i = 0 ; i < vegetable.length ; i++ ){
		list += "<tr>\r\n";
		list += "<td>"+vegetable[i].name+"</td>\r\n";
		list += "<td>"+vegetable[i].area+"</td>\r\n";
		list += "<td>"+vegetable[i].season+"</td>\r\n";
		list += "</tr>\r\n";
		}
	$("#vegeTable tbody").append(list);
	$('#search').on('keyup', verse);
	function verse(){
			var setval = esc_html( $(this).val() );
			$('#vegeTable tbody tr').hide();
			$('#vegeTable tbody tr:contains(' + setval + ')').show();
	}
	var esc_html = function(val) {
                return $('<div />').text(val).html();
    };
});

サンプル

//テキストフィールドの値をリセット
$('#search').val('');

//配列を指定
var vegetable = [{'name':'オクラ','area':'アフリカ北東部','season':'夏'}]

//変数 list の初期値
var list = "";

//for文で繰り返し処理を行います
for (i = 0; i < ary.length; i++) { .... }

//append()で ID #vegeTable に for で追加したタグ挿入します。
$("#vegeTable tbody").append(list);

//#search が入力されたら 関数verse を実行。
$('#search').on('keyup', verse);

//関数verse
function verse(){

//検索で入力された文字列を関数でサニタイズ
var setval = esc_html( $(this).val() ); 

//tbody の要素を非表示
$('#vegeTable tbody tr').hide();

//tbody の要素内に文字列 setval がある行を表示
$('#vegeTable tbody tr:contains(' + setval + ')').show();
}

//関数esc_html
var esc_html = function(val) {

//入力された検索文字列をサニタイズします。
//例）<s>TEST</s>　→ &lt;s&gt;TEST&lt;/s&gt;
return $('<div />').text(val).html();
}

表示の列数等にもよりますが、掲載しているサンプル程度の文字量なら1,000行位はサクッとjQuery で検索できます。jQuery で文字列の検索をされたい場合等がありましたら是非お試し下さい。