zoukankan      html  css  js  c++  java
  • js实现输入框联想搜索

    实现点击和输入搜索联想,把搜索出的列表放到下面的ul列表中,然后再列表中选择并把公司名赋值给输入框,把guid赋值给隐藏域

    html

    <input type="hidden" name="CompanyGuid" value="" id="CompanyGuid"/>
    <div class="form-group clearfix">
           <label for="inline" class="inline fl">公司名称:</label>
           <div class="autoSupRelative fl">
                <input type="text" class="input" name="CompanyName" id="CompanyName" autocomplete="off">
                <ul class="autoSupAbsolute"></ul>
           </div>
    </div>

    css样式

    .autoSupRelative{position: relative;padding: 0;float:left;z-index:99;}
    .autoSupAbsolute{position: absolute;left: 0;top:30px;background: #ffffff;border:1px solid #ccc;width:100%;max-height:240px;overflow-y: auto;margin: 0;padding: 0;box-shadow: 0px 2px 2px #ccc;display: none}
    .autoSupAbsolute li{ list-style: none;cursor: pointer;padding: 5px;line-height: 22px;font-size: 12px;}
    .autoSupAbsolute li:hover{background: #2dc3e8;color: #ffffff;}

    js

    //模糊查询
    function SearchLike(jsons) {
        //var timerSerch = null;
        $(document).on('keyup', '[name=' + jsons.name + ']', function () {
            var This = this;
            this.timerSerch = setTimeout(function () {//如果一直输入,就先不查询,等键抬起500毫秒之后再进行查询。
                getSearchValue({
                    This: This,
                    Event: "keyup",
                    url: jsons.url,
                    fun: jsons.fun
                });
            }, 500);
            $(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();
        });
        $(document).on('keydown', '[name=' + jsons.name + ']', function () {
            var _this = this;
            clearTimeout(_this.timerSerch);
    
        });
        $(document).on('click', '.autoSupAbsolute li', function (e) {
            var name = $(this).parents('.autoSupRelative').find('input[type=text]').attr('name');
            if (name == jsons.name) {
                var thisHtml = $(this).attr('companyName');//.replace('<span style="display: none;  0px; height: 0px;" id="transmark"></span>', '');//.split('<span')[0];
                // thisHtml = thisHtml.split(',')[0];
                if (jsons.HideName) {
                    $(this).parents('.autoSupRelative').find('[name=' + jsons.HideName + ']').val($(this).attr("PK_Guid"));
                }
                if (thisHtml) {
                    $(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').val(thisHtml);
                }
                if (jsons.fun1) {
                    jsons.fun1(this);
                }
                $(this).parents('.autoSupRelative').find('[name=' + jsons.name + ']').siblings('ul').html('');
                $(this).parents('.autoSupAbsolute').hide();
            }
        });
    
        // $('[name=' + jsons.name + ']').on('click', function (e) {
        $(document).on('click', '[name=' + jsons.name + ']', function (e) {
    
            e.stopPropagation();
            var This = this;
            $('.autoSupRelative').css({ 'zIndex': '99' });
            $(this).parents('.autoSupRelative').css({ 'zIndex': '100' });
            $(this).parents('.autoSupRelative').find('.autoSupAbsolute').show();
            // if ($(this).parents('.autoSupRelative').find('ul li').length ==0) {//如果没有输入字段,就不重新检索
            $(this).parents('.autoSupRelative').find('ul').html('<div style="padding:0 10px;">数据加载,请稍后....</div>');
            getSearchValue({
                This: This,
                Event: "click",
                url: jsons.url,
                fun: jsons.fun
            });
            // }
        }).on("blur", function () {
            $('.autoSupRelative').css({ 'zIndex': '' });
        });
        $(document).on('click', function (e) {
            $('.autoSupAbsolute').hide();
        });
    
        function getSearchValue(json) {
            if (jsons.setUrl) {
                //jsons.setUrl();
                json.url = jsons.setUrl();
            }
            $.ajaxSetup({ cache: false });
            $.ajax(
                {
                    type: "GET",//POST
                    url: json.url + encodeURIComponent($(json.This).val()),
                    success: function (msg) {
                        var htmlInit = '';
                        //if (msg != "") {
                        msg = JSON.stringify(msg)
                        msg = msg.replace(/'/g, '"');//把单引号替换成双引号
                        //var datas = jQuery.parseJSON(msg);
                        var datas = []
                        datas = jQuery.parseJSON(msg).result;
                        var html = '';
                        if (json.Event == 'click') {
                            if (datas.length == 0) {
                                $(json.This).next().val('');//清除隐藏域的赋值
                                htmlInit = '<div style="text-align:center">未找到此项....</div>';
                            } else {
                                for (var i = 0; i < datas.length; i++) {
                                    if (json.fun) {
                                        htmlInit += json.fun(datas[i]);
                                    } else {
                                        htmlInit += '<li PK_Guid="' + datas[i].companyGuid + '"companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';
                                    }
                                }
                            }
                            $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(htmlInit);
                            $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').show();
                        }
                        if (json.Event == 'keyup') {
                            if ($(json.This).val() == '') {
                                $(json.This).parents('.autoSupRelative').find('ul').html('');
                                $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').hide();
                            } else {
                                if (datas.length == 0) {
                                    $(json.This).next().val('');//清除隐藏域的赋值
                                    html = '<div style="text-align:center">未找到此项....</div>';
                                } else {
                                    for (var i = 0; i < datas.length; i++) {
                                        if (json.fun) {
                                            html += json.fun(datas[i]);
                                        } else {
                                            html += '<li PK_Guid="' + datas[i].companyGuid + '" companyName="' + datas[i].companyName + '">' + datas[i].companyName + '</li>';
                                        }
                                    }
                                }
                                $(json.This).parents('.autoSupRelative').find('.autoSupAbsolute').html(html);
                            }
                        }
                        // }
                    },
                    error: function () {
                        $(json.This).parents('.autoSupRelative').find('ul').html('<div style="padding:10px;">数据加载失败....</div>');
                    }
                }
            );
        }
    }
    
    // 使用--点击输入框,请求接口--url是联想搜索接口,companyName没有值的时候显示所有的列表--下拉列表选择把姓名和id复制给input
    SearchLike({
        name: 'CompanyName', url: '/CompanyCustomBill/CompanySimpInfo?companyName=', fun1: function (_this) {
            $("#CompanyName").val($(_this).attr('companyName'));
            $("[name=CompanyGuid]").val($(_this).attr('PK_Guid'));
        }
    });
  • 相关阅读:
    Java学习开篇
    《我的姐姐》
    世上本无事,庸人自扰之
    这48小时
    补觉
    淡定
    es java api 设置index mapping 报错 mapping source must be pairs of fieldnames and properties definition.
    java mongodb groupby分组查询
    linux 常用命令
    mongodb too many users are authenticated
  • 原文地址:https://www.cnblogs.com/leiting/p/9513711.html
Copyright © 2011-2022 走看看