jquery.autocomplete样本

<tr id="comboMeal" style="display:none">
	<th>
		搜索添加单品:
	</th>
	<td>
		<input type="text" id="comboProduct" name="comboProduct" class="text" maxlength="200"/>
	</td>
</tr>
<tr id="showCombo" style="display:none">
	<th>
		套餐单品详情：
	</th>
	<td>
		<table id="comboTable" class="item">
			<tr>
				<th>
					编号
				</th>
				<th>
					名称
				</th>
				<th>
					价格
				</th>
				<th>
					数量
				</th>
				<th>
					操作
				</th>
			</tr>
		</table>
	</td>
</tr>

$(function(){
	//查询套餐详情
	var shopId = ${shopId};
	var $comboProduct = $("#comboProduct");
	//可以请求后台得到json对象或者直接给一个json对象
	$comboProduct.autocomplete("findProByProCategoryAndShop.jhtml", {
		dataType: "json",	//接收类型
		extraParams: {	//所需参数
			SecProCateId: function(){
				return $("#secCate").val(); //如果是动态获取参数可用这种方式返回
			},
			shopId:shopId //或者直接拿到参数
		},
		cacheLength: 1,	//缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10 
		max: 20,	//下拉显示项目的个数.Default: 10
		width: 218,	//指定下拉框的宽度. Default: input元素的宽度
		scrollHeight: 300,	//自动完成提示的卷轴高度用像素大小表示 Default: 180 
		parse: function(data) {	//查询出的数据
			return $.map(data, function(item) {
				return {
					data: item,
					value: item.name
				}
			});
		},
		formatItem: function(item) { //循环显示在下拉列表中
			return item.name+ (item.specifications.length > 0 ?"["+item.specifications+"]":"");
		}
	}).result(function(event, item) {	//点击下拉列表中一项要完成的，items为此项
		var comboTr = (
				[@compress single_line = true]
				'<tr>
				<td>
				<input type="hidden" name="productId" value="' + item.id + '" \/>
				' + item.sn + '
				<\/td>
				<td>
				<span title="' + escapeHtml(item.name) + '">' + escapeHtml(abbreviate(item.name, 50, "...")) + (item.specifications.length > 0 ? '['+ escapeHtml(item.specifications)+']' : '') + '<\/span>' + '' + '
				<\/td>
				<td name="proPrice">
				￥' + item.price + '
				<\/td>
				<td>
				<input id="proquan' + item.id + '" type="text" name="proquan" value="1" style="width:35px;text-align:center" οnchange="changeQuan(this,' + item.price + ')"\/>
				<\/td>
				<td>
				<a href="' + escapeHtml(item.url) + '" target="_blank">[${message("admin.common.view")}]<\/a>
				<a href="javascript:;" class="remove">[${message("admin.common.remove")}]<\/a>
				<\/td>
				<\/tr>'
				[/@compress]
		);
		$("#comboTable").append(comboTr);
	});
	
	
	// 删除已添加到表格中的单品(通过class完成)
	$("#comboTable").on("click", "a.remove", function() {
		var $this = $(this);
		$.dialog({
			type: "warn",
			content: "${message("admin.dialog.deleteConfirm")}",
			onOk: function() {
				$this.closest("tr").remove();
				$comboProduct.val("");
				modifMP();
			}
		});
	});
});

==============================================================

是jquery.autocomplete的一个大概框架。

详细参考：http://www.cnblogs.com/chengxiaohui/articles/1872882.html

        或：http://www.jb51.net/article/24219.htm