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" onchange="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