//条码录入，自动完成功能

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 = "", BatchNo = "P01", GroupNo = "" });

            list.Add(new FlowcardModel() { SKU = "", BatchNo = "P01", GroupNo = "" });

            list.Add(new FlowcardModel() { SKU = "", BatchNo = "P01", GroupNo = "" });

            return list;

        }

    }

}

jquery ui autocomplete的更多相关文章

  1. jQuery UI AutoComplete的使用

    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...

  2. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  3. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  4. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  5. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  6. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  7. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. jQuery.ui autoComplete使用

    官网  http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...

  9. jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框

    $("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...

  10. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

随机推荐

  1. 单源最短路模板_SPFA_Dijkstra（堆优化）_C++

    随手一打就是标准的SPFA,默认1号节点为出发点,当然不用 f 判断是否在队里也可以,只是这样更优化一点 void spfa() { int i,x,k; ;i<=n;i++) { d[i]=o ...

  2. 原生sql和django的事务控制

    def test(request): with connections['default'].cursor() as c: try: with transaction.atomic(using='de ...

  3. LeetCode Regular Expression Matching 网上一个不错的实现（非递归）

    '.' Matches any single character.'*' Matches zero or more of the preceding element. The matching sho ...

  4. dependencyManagement和dependencies的区别

    参考:http://zhaoshijie.iteye.com/blog/2094478http://blog.csdn.net/cpf2016/article/details/45674377 还有一 ...

  5. 忘记root密码怎么办

    忘记root密码有两种解决办法.一种是emergency模式,另一种是rescue模式. 1.emergency模式 这个模式又有人称为单用户模式.使用这种模式,前提是要知道grub密码.一般适用于对 ...

  6. synchronized 修饰static方法

    •1.依靠对象锁锁定 初始化一个对象时,自动有一个 对象锁. synchronized {普通方法}依靠对象锁工作,多线程访问synchronized方法,一旦某个进程抢得锁之后,其他的进程只有排队对 ...

  7. C# 调试程序时如何输入命令行参数

    调试程序时如何输入命令行参数http://www.a769.com/archives/320.html 开发命令行程序时,我们会疑惑,从那里输入参数呢?请看下面的教程,让你摆脱困扰. 1.点击菜单栏: ...

  8. （五）agentd端cpu的触发器配置

    配置===>模板===>选择对应的模板===> 这里我验证触发器是否有效,定义的触发器的值超过0.01就出发报警,这里我做的是最新的T值超过0.01就触发触发器 验证,说明触发器触发 ...

  9. Spark GraphX宝刀出鞘，图文并茂研习图计算秘笈与熟练的掌握Scala语言【大数据Spark实战高手之路】

    Spark GraphX宝刀出鞘,图文并茂研习图计算秘笈 大数据的概念与应用,正随着智能手机.平板电脑的快速流行而日渐普及,大数据中图的并行化处理一直是一个非常热门的话题.图计算正在被广泛地应用于社交 ...

  10. wwwscan网站目录文件批量扫描工具

    准备一个比赛样题里面给的一个扫描的工具: 不知道怎么用就上网百度了一下果然有关于这个软件的两篇介绍(感觉写的很好),第一篇介绍的应该和我的工具一样,也给了例子(现在Google不能访问了)和参数介绍, ...