vue+jquery 可搜索下拉框

移动端没有可以直接使用的搜索的下拉框组件，因项目需要，简单弄了一个

引入jQuery www.cnblogs.com/xiaobai-y/p…

npm i jquery

在webpack.base.conf.js中module.exports的最后加入这行代码

plugins: [
　　new webpack.ProvidePlugin({
　　　　jQuery: "jquery",
　　　　$: "jquery"
　})

• html

<div class="top-wrapper">
	<span id="">请选择</span>
	<div class="program-select">
		<input id="programId" v-model="name" type="text" @click="clickI" oninput="searchList(name)" @change="changeI(name)"/>
		<ul id="list">
			<li v-for="(item,index) in Data" :key="index" @click="appclick(item)">{{item.name}}</li>
		</ul>
	</div>
</div>

• js

import $ form 'jquery'

mounted() {
    this.clickI()
},
methods: {
 clickI(){
    $(".program-select").click(function(e){
            $(this).find("ul").show();
            e.stopPropagation();
    });

    $('#list').delegate('li','mouseover mouseout',function(e){
            $(this).toggleClass("on");
            e.stopPropagation();
    });

    $('#list').delegate('li','click',function(e){
            var val = $(this).text();	
            console.log('val',val)
            $(".program-select").find("input").val(val);
            $(".program-select").find("ul").hide();
            e.stopPropagation();
            document.getElementById('programId').value=val
    });

    $(document).click(function(){
            $(".program-select").find("ul").hide();
    });
},
		
		
    appclick(val) {
            this.name = val.name
            this.value= val.value
            this.$emit("input", this.value+'/'+this.name)
    }，
    changeI() {
            let arr= Data.find(item => item.name == this.name)
            if(arr) {
                    this.name = arr.name
                    this.value= arr.value
                    this.$emit("input", this.value+'/'+this.name)
            }else{
                    this.name = ''
                    this.$emit("input", '')
            }
    }，
 searchList(strValue) {
        var count = 0;
        console.log(strValue)
        if (strValue != "") {
                $(".program-select ul li").each(function(i) {
                        var contentValue = $(this).text();
                        if (contentValue.toLowerCase().indexOf(strValue.toLowerCase()) < 0) {
                                $(this).hide();
                                count++;
                        } else {
                                $(this).show();
                        }
                        if (count == (i + 1)) {
                                $(".program-select").find("ul").hide();
                        } else {
                                $(".program-select").find("ul").show();
                        }
                });
        } else {
                $(".program-select ul li").each(function(i) {
                        $(this).show();
                });
        }
}
}

• css

.program-select input{
        outline: none;
        cursor: pointer;
        height: 1.8em;
        font-size: 15px;
        padding: 0 10px;
        border-radius: .3em;
        position: absolute;
        line-height: 1.8em;
        text-align: right;
        right: 0;
        width: 65vw;
}

ul{
        list-style: none;
}

.program-select{
        position: relative;
        width: 14em;
        margin: 0 auto;
        box-shadow: 0 3px 5px #999;
        -webkit-border-radius: .3em;
        -moz-border-radius: .3em;
        border-radius: .3em;
}

.program-select ul{
        display: none;
        border: 1px solid #d5d5d5;
        width: 100%;
        position: absolute;
        top: 1.8em;
        overflow: hidden;
        background-color: #fff;
        max-height: 150px;
        overflow-y: auto;
        border-top: 0;
        z-index: 10001;
        text-align: center;
}

.program-select ul li{
        height: 30px;
        line-height: 2em;
        overflow: hidden;
        padding: 5px 10px;
        cursor: pointer;
        border-top: 1px solid #d5d5d5;
        z-index: 999;
}

.program-select ul li.on{background-color: #e0e0e0;}


.input{
        height: 28px;
        width: 200px;
        outline: none;
        padding: 0 5px;
        -webkit-border-radius: .3em;
        -moz-border-radius: .3em;
        border-radius: .3em;
        border: 1px solid #000;
}

差不多就这个样子，需要注意：li的click事件和input输入框的事件同步！