jquery自动完成插件的使用

.ui-autocomplete {
        z-index:99999 !important;
        max-height: 100px;
        overflow-y: auto;
        /* 防止水平滚动条 */
        overflow-x: hidden;
        z-index:9999999
    }

<script src="~/Scripts/jquery-ui.js"></script>
<link href="~/Scripts/jquery-ui.css" rel="stylesheet"/>

$("#CalibrationCompany").autocomplete({
        autoFill: true,
        matchCase: false, //是否开启大小写敏感
        autoFocus: true, // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
        select: function(e, ui) {
            $("#CalibrationCompany").val(ui.item.Name);
            $("#CalibrationCompanyId").attr("value", ui.item.Id);
        },
        source: function(request, response) {
            $.ajax({
                type: "post",
                dataType: "json",
                url: "@Url.Action("GetCompanies")",
                data: {
                    "name": $("#CalibrationCompany").val()
                },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.Name + "    " + item.ShortName,
                            value: item.Name,
                            Id: item.Id
                        }
                    }));
                }
            });
        }
    });

 

posted on 2018-12-28 11:15  菜鸟客栈  阅读(160)  评论(0编辑  收藏  举报

导航