jquery ui autocomplete 

//条码录入，自动完成功能
function addAutoComplete() {
    $('#txt_spuNo').autocomplete({
        autoFocus: true,
        source: function (request, response) {
            $.ajax({
                url: "../HandlerBase.ashx?action=TipBarcode",
                data: { spu: request.term },
                success: function (data) {
                    response($.parseJSON(data));
                }
            });
        },
        minLength: 3
    });
}

自定义格式：

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="../Content/themes/base/all.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.6.4.min.js"></script>
    <script src="../Scripts/jquery-ui-1.11.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            addAutoComplete();
        });
        function addAutoComplete() {
            $('#txt_Sku').autocomplete({
                autoFocus: true,
                source: function (request, response) {
                    $.ajax({
                        url: "http://localhost/jqueryuiapp.service/api/flowcard/getlist",
                        data: { sku: request.term },
                        dataType: "json",
                        success: function (data) {
                            response(data);
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    if (ui.item != null) {
                        $('#txt_Sku').val(ui.item.SKU);
                        $('#txt_BatchNo').val(ui.item.BatchNo);
                        $('#txt_GroupNo').val(ui.item.GroupNo);
                    }

                    return false;
                }
                ,
                focus: function (event, ui) {
                    $('#txt_Sku').val(ui.item.SKU);
                    return false;
                }
            }).autocomplete("instance")._renderItem = function (ul, item) {
                return $('<table></table>')
    .data("item.autocomplete", item)
    .append('<tr><td style="width:140px;">' + item.SKU + '</td><td style="width:50px;"> ' + item.BatchNo + '</td><td style="width:60px;"> ' + item.GroupNo + "</td></tr>")
    .appendTo(ul);

            };
        };
    </script>
</head>
<body>
    SKU：<input id="txt_Sku" width="200" /><br />
    批次：<input id="txt_BatchNo" width="200" /><br />
    版号：<input id="txt_GroupNo" width="200" />
</body>
</html>

 

 

后台：

using System.Runtime.Serialization;

namespace JQueryUIApp.Model
{

    [DataContract]
    public class FlowcardModel
    {
        [DataMember]
        public string SKU { get; set; }
        [DataMember]
        public string BatchNo { get; set; }
        [DataMember]
        public string GroupNo { get; set; }
    }
}

 

using System.Collections.Generic;
using System.Web.Http;
using JQueryUIApp.Model;

namespace JQueryUIApp.Service.Controllers
{
    public class FlowCardController : ApiController
    {
        public List<FlowcardModel> GetList()
        {
            var list = new List<FlowcardModel>();
            list.Add(new FlowcardModel() { SKU = "12300000", BatchNo = "P01", GroupNo = "1" });
            list.Add(new FlowcardModel() { SKU = "12340000", BatchNo = "P01", GroupNo = "1" });
            list.Add(new FlowcardModel() { SKU = "12345000", BatchNo = "P01", GroupNo = "1" });
            return list;
        }
    }
}

 

posted @ 2016-04-19 08:48  PROS  阅读(434)  评论(0)  编辑  收藏  举报