js input 下拉多词备选

最新推荐文章于 2023-02-12 14:55:40 发布

Brazor

最新推荐文章于 2023-02-12 14:55:40 发布

阅读量489

点赞数

分类专栏：前端

原文链接：https://my.oschina.net/zhaomin/blog/657457

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery-ui.js" ></script>
</head>
<body>
<input value=""/>
<div class="love"></div>
<script>
    $("input").keyup(function(){
        var list=[{"name":"雷婷婷"},{"name":"雷玉婷"},{"name":"雷玉琴"}];
        list = escape2Html(list);//如果是ajax返回,或者页面php打印出来的,可能有转义字符，可以用上
        list =  eval('(' + list + ')');//防止不是json对象
        if($(this).val()!=null && $(this).val()!=""){
            var matchStr = new RegExp($(this).val(),'i');//不区分大小写，用户英文搜索
            $(".love").html("");
            for(var i=0;i<list.length;i++){
                if(list[i].name.match(matchStr)){
                    $(".love").append("<div>"+list[i].name+"</div>")
                }
            }
        }else{
            $(".love").html("");
        }
    });
    function escape2Html(str) {
            var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
            return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
</script>
</body>
</html>

转自：https://my.oschina.net/zhaomin/blog/657457

稍加修改

Brazor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js input 下拉多词备选

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/jquery-ui.css" /> <script type="text...
复制链接

扫一扫

专栏目录