码迷,mamicode.com
首页 > Web开发 > 详细

jquery ui autocomplete

时间:2016-04-19 10:10:48      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

//条码录入,自动完成功能
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;
        }
    }
}

 

jquery ui autocomplete

标签:

原文地址:http://www.cnblogs.com/CodingArt/p/5369129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!