jquery.autocomplete样本

来源：互联网发布：软件测试理论基础知识编辑：程序博客网时间：2024/05/21 14:14

<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: 10width: 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

0 0