input关键字可筛选下拉框

HTML

<!-- onclick键入有问题，复制以后需要手动重新输入一次 -->
<div class="dropdownAdd" onclick="search.changeValue(this);search.searchKeyword()" id="search">
    <input type="hidden" class="memberID">
    <input type="text" class="dropdown-selected" id="search-input" placeholder="请输入关键字"
        onkeyup="search.searchKeyword();" autocomplete="off">
    <ul class="allMembers">
        <li><a>张三</a></li>
        <li><a>李四</a></li>
        <li><a>王五</a></li>
        <li><a>小六</a></li>
    </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

CSS

    .dropdownAdd {
        position: relative;
        display: inline-block;
        width: 300px;
        padding-left: 10px;
    }

    .dropdown-selected {
        width: 100% !important;
        height: 30px;
        line-height: 30px;
        border: 1px solid #c6c8cc;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        color: #333;
        /* text-indent: 10px; */
        margin-bottom: 0 !important;
    }

    .dropdownAdd ul {
        padding: 0;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        background-color: #fff;
        margin-top: 2px;
        border: 1px solid #c6c8cc;
        position: absolute;
        display: none;
        z-index: 2;
    }

    .dropdownAdd ul li {
        list-style: none;
        text-indent: 10px;
    }

    .dropdownAdd ul li a {
        display: block;
        color: #282c33;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dropdownAdd ul li:hover {
        background-color: #f2f6fa;
    }

    .dropdownAdd ul li a:active,
    .dropdownAdd ul li.active a {
        background-color: #e4e9f2;
    }

JS

var search = {
        searchKeyword: function () {
            var nWord = $("#search-input").val();
            //var temarray = nWord.split(""); //分割
            var array = this.unique(nWord.split(""));
            var dsa = $("#search").find("ul li a");//获取全部列表
            var linumber = 0;

            $("#search ul li").show();
            for (var t = 0; t < dsa.length; t++) {
                $(dsa[t]).html($(dsa[t]).text());
                var temstr = ($(dsa[t]).text()).split("");
                var yes = false;
                for (var i = 0; i < array.length; i++) {
                    var posarr = this.findAll(temstr, array[i]);
                    if (posarr.length > 0) {
                        yes = true;
                        for (var j = 0; j < posarr.length; j++) {
                            temstr[posarr[j]] = "<em style='color:red;'>" + temstr[posarr[j]] + "</em>";
                        }
                    }
                }
                if (!yes) {
                    $(dsa[t]).closest("li").hide();
                }
                else {
                    linumber++;
                    var htmlstr = "";
                    for (var m = 0; m < temstr.length; m++) {
                        htmlstr += temstr[m];
                    }
                    $(dsa[t]).html(htmlstr);
                }

            }
            if (linumber == 0) {
                $("#search ul li").show();
                $("#search ul").slideDown(200);
            }
        },
        findAll: function (arr, str) {
            var results = [],
                len = arr.length,
                pos = 0;
            while (pos < len) {
                pos = arr.indexOf(str, pos);
                if (pos === -1) {
                    break;
                }
                results.push(pos);
                pos++;
            }
            return results;
        },
        unique: function (arr) {
            var new_arr = [];
            for (var i = 0; i < arr.length; i++) {
                var items = arr[i];
                //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
                if ($.inArray(items, new_arr) == -1) {
                    new_arr.push(items);
                }
            }
            return new_arr;
        },
        changeValue: function (obj) {
            $('.dropdownAdd ul').slideUp(200);
            var input = $(obj).find('.dropdown-selected');
            var ul = $(obj).find('ul');
            if (!ul.is(':visible')) {
                ul.slideDown('fast');
            } else {
                ul.slideUp('fast');
            }

            $(obj).find('ul a').click(function () {
                //点击下拉列表后需要执行的操作
                input.val($(this).text());
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active')
                $(this).closest('ul').slideUp(200);
                $('.totalprice').text(`${Number($(this).data('price')) * Number($('#goodsNumber').val())}`)
                input.data('price', $(this).data('price')).data('id', $(this).data('id')).data('name', $(this).data('name'))
                return false;
            })
            var e = this.getEvent();
            window.event ? e.cancelBubble = true : e.stopPropagation();


        },
        _init: function () {
            $("#search").on("click", "ul li a", function () {
                $("#search-input").val($(this).text());
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active')
                $(this).closest('ul').slideUp(200);
                return false;
            })
        },
        getEvent: function () {
            if (window.event) {
                return window.event;
            }
            var f = arguments.callee.caller;
            do {
                var e = f.arguments[0];
                if (e && (e.constructor === Event || e.constructor === MouseEvent || e.constructor === KeyboardEvent)) {
                    return e;
                }
            } while (f = f.caller);
        }

    }
    //下拉搜索框
    search._init();
    $('body').on('click', function () {
        $('.dropdownAdd ul').slideUp(200);
    })