原生javascript实现的选取搜索组件

Posted 2020-11-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生javascript实现的选取搜索组件相关的知识，希望对你有一定的参考价值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="less/index.css">
<style>
    .select_text{
        width:30%;
        height: 20px;
        padding: 8px;
        border-radius: 5px;
        color: grey;
    }
    .select_text:focus{
        border-color: green;
        box-shadow: 0px 0 5px grey;
    }
    .select_span{
        position: relative;
        left: -2%;
        cursor: pointer;
    }
    .select_ul{
        display: none;
        width: 27%;
        padding: 25px;
        margin: 0;
        height: 25vh;
        border: 1px solid grey;
        overflow: auto;
    }
    .select_li:hover{
        background: green;
    }
</style>
</head>
<body>  
<div id="select_container"> 
</div>
<script>
function select_search(id,arr){
    var container = document.getElementById(id)
    var hidden = document.createElement(‘input‘)
    hidden.setAttribute(‘type‘,‘hidden‘)
    var text = document.createElement(‘input‘)
    text.setAttribute(‘type‘,‘text‘)
    text.setAttribute(‘class‘,‘select_text‘)
    var span = document.createElement(‘span‘)
    span.setAttribute(‘class‘,‘select_span‘)
    span.innerHTML = ‘O‘
    var ul = document.createElement(‘ul‘)
    ul.setAttribute(‘class‘,‘select_ul‘)
    container.appendChild(hidden)
    container.appendChild(text)
    container.appendChild(span)
    container.appendChild(ul)
    function getValue(arr){
        var lis = ‘‘
        for(var i=0;i<arr.length;i++){
            lis += ‘<li class="select_li">‘+arr[i].name+‘</li>‘
        }
        ul.innerHTML = lis
    }
    function searchValue(str,arr){
        var retArray = new Array()
        if(str==‘‘){
            retArray = arr
        }else{
            retArray = arr.filter(function(item){
                var check = item.name.indexOf(str)
                if(check!=-1){
                    return item
                }
            })
        }
        return retArray
    }
    function chooseValue(ele){
        for(var i=0;i<ele.length;i++){
            var prop = ele[i].getAttribute(‘class‘)
            if(prop.indexOf(‘select_li‘)!=-1){
                ele[i].onclick = function(){
                    var val = this.innerHTML
                    text.value = val
                }
            }
        }
    }
    function removeHide(){
        ul.style.display = ‘block‘
    }
    function getHide(){
        ul.style.display = ‘none‘
    }
    function triggerHide(){
        var all = document.getElementsByTagName(‘*‘)
        var arr = new Array(‘select_text‘,‘select_span‘,‘select_ul‘,‘select_li‘)
        for(var i=0;i<all.length;i++){
            all[i].onclick = function(e){
                e.stopPropagation()
                e.preventDefault()
                var prop = this.getAttribute(‘class‘)
                var flag = false
                if(prop){
                    for(var j in arr){
                        var item = arr[j]
                        if(prop.indexOf(item)!=-1){
                            flag = true
                            break
                        }
                    }
                }
                if(!flag){
                    getHide()
                }else{
                    removeHide()
                }
            }
        }
    }
    triggerHide()
    text.onfocus = function(){
        removeHide()
        var val = this.value
        var valArray = searchValue(val,arr)
        getValue(valArray)
        lis =  document.getElementsByTagName(‘li‘)
        chooseValue(lis)
    }
    text.onkeyup = function(){
        var val = this.value
        var valArray = searchValue(val,arr)
        getValue(valArray)
        lis =  document.getElementsByTagName(‘li‘)
        chooseValue(lis)
    }
    span.onclick = function(e){
        var val = text.value
        var valArray = searchValue(val,arr)
        getValue(valArray)
        lis =  document.getElementsByTagName(‘li‘)
        chooseValue(lis)
        e.stopPropagation()
        e.preventDefault()
        var style = ul.style.display
        if(style==‘block‘){
            getHide()
        }else{
            removeHide()
        }
    }
}
var arr = new Array(
        {
            id:1,
            name:‘a‘
        },
        {
            id:2,
            name:‘b‘
        },
        {
            id:3,
            name:‘c‘
        },
        {
            id:4,
            name:‘aa‘
        },
        {
            id:5,
            name:‘bb‘
        },
        {
            id:6,
            name:‘cc‘
        }
    )
    select_search(‘select_container‘,arr)
</script>
</body>
</html>

效果：

以上是关于原生javascript实现的选取搜索组件的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript实用功能代码片段

浏览器中的语音识别功能

React Native 桥接原生模块

angularjs material 实现搜索框

Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码附:原生js的Ajax代码