html input 输入框自动填充, 自动补全提示_nextvary的博客-程序员宅基地

技术标签: input  自动补全  提示框  html  javascript  

效果如下:
这里写图片描述

这里写图片描述
demo


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="value" autoComplete="off">

</body>
</html>
<script>
    function createstyle(css){
     
        var mystyle=$('#mystyle');
        if(!mystyle.length>0){
            var style="<style id='mystyle'></style>";
            $(document).find('head').append(style);
            mystyle=$('#mystyle');
        }
        mystyle.append(css);
    }

    function autoShowUser(users,id) {
     

        id=id||"#value";
        var wd=$(id)[0].clientWidth;
        var hg=$(id)[0].clientHeight;
        var suggest='<ul id="suggest" style="display: none;position:absolute;width: '+wd+'px; background-color: white;padding: 0px;margin:0px;"></ul>';
        var css_li="#suggest li{display: block;height:"+hg+";font: 14px/25px '微软雅黑','黑体',sans-serif;margin: 0px;color:rgb(66, 139, 202);text-align: left;padding:1px}";
        css_li+="#suggest li:hover{cursor: pointer;margin: 0px;background-color: rgb(227,227,227);}";
        $(id).after(suggest);
        createstyle(css_li);
        $(id).bind('keyup click',function (e) {
     
            var name= $(this).val();
            var num=0;
            if(name!='' ){
                var html='';
                for (var i=0;i<users.length;i++){
                    if(users[i].indexOf(name)>-1){
                        html += "<li>" +users[i]+"</li>";
                        num++;
                    }
                    if(num>9){
                        break;
                    }
                }
                if(html !=''){
                    $('#suggest').show();
                    $('#suggest').html(html);
                    $('#suggest li').css(css_li);
                    $('#suggest li').bind('click',function(e){
     
                        $(id).val($(e.target).html());
                        $('#suggest').hide();
                    });
                }
            }else{

                $('#suggest').hide();
            }
        });

        $(id).blur(function () {
     
            setTimeout(function () {
     
                $('#suggest').hide();
            },150);
        })

    }
    var users=['22','221','222','223','224','老大','老二','老三'];
    autoShowUser(users,'#value') ;
</script>

用法:

调用函数就可以了,users变量存储数组对象 (一般后台传递过来,可以数据加密防止泄露………..),

autoShowUser(users,'#value') ;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/nextvary/article/details/78961323

智能推荐

走出996困境:产权、通证与生产力 |链捕手_链捕手-的博客-程序员宅基地

近期996话题由于众多企业家的参与,成为舆论场最为热门的话题之一。在公司制下,个体利益与公司利益很大程度上存在不可调和的矛盾,996工作制则是这一矛盾的集中体现,同时也会...

(kuangbin带你飞--kmp) Seek the Name, Seek the Fame_deebcjrb的博客-程序员宅基地

原题目:The little cat is so famous, that many couples tramp over hill and dale to Byteland, and asked the little cat to give names to their newly-born babies. They seek the name, and at the same time s...

(转)#小美化#Android给TextView设置透明背景、圆角边框_攻城龙的博客-程序员宅基地

转自:http://blog.csdn.net/welovesunflower/article/details/7926530 方便自己查阅~第一种方法:在drawable文件夹下新建一个文件设置背景样式代码:在drawable文件夹下面新建text_view_border.xml <corners android:topLeftRadiu

相似三角形 (sdut oj)_SwordsMan98的博客-程序员宅基地

相似三角形Time Limit: 1000MS Memory Limit: 65536KBProblem Description给出两个三角形的三条边,判断是否相似。Input多组数据,给出6正个整数,a1,b1,c1,a2,b2,c2,分别代表两个三角形。(边长小于100且无序)Output

我的学习博客(一)_Swab80的博客-程序员宅基地

我的学习博客(一)——2019.10.71.我的目标在近一年的时间里,自学Java语言;尽自己最大的努力,并保持热情,扎实掌握高等代数以及数学分析;在院级学生会中尽到自己的职责,培养社会实践能力,争取一个提升自我的机会,并做到工作学习两不误。2.我的困惑如何做到高度自律;如何减少惰性;如何争取每日充足的体育锻炼;如何在课堂上与老师有更好的互动与交流;为什么要写这篇博客。3....

Viewpage 和 WebView的冲突_jimtrency的博客-程序员宅基地

public class ExtendedWebView extends WebView { public ExtendedWebView(Context context, AttributeSet attrs) { super(context, attrs); }@Overridepublic boolean canScrollHorizontally(in

随便推点

批量修改文件名 (python对于文件目录的操作)_PFFstronger的博客-程序员宅基地_python自动识别文件名并且批量修改文件名

前言测试总遇到各种造数据的情况,在测试文件数量不足的情况,我需要批量修改文件名,才能符合测试需求,客户只提供部分文件,这样就要批量修改文件名。如何做os.listdir() 可以读取文件夹中的文件,存放在列表中,os.rename()可以把文件重命名,那么我就可以写脚本了,这次简单粗暴吧。import osclass Rename(): ''' 重命名文件名,将文件名写入指定的txt文件中 ''' def __init__(self,path):

mysql慢日志开启_明纬廷的博客-程序员宅基地_mysql启动慢日志

先查看慢日志状态SHOW VARIABLES WHERE Variable_name IN('slow_query_log','long_query_time','slow_query_log_file','log-query-not-using-indexes');打开my.ini配置文件在[mysqld]中添加#开启慢日志记录slow_query_log = ON#超过...

GNSS说第(六)讲---卫星位置插值方法简介(一)_十八与她的博客-程序员宅基地

最近博主在修改与完善师兄编写的单点定位程序,其中涉及到卫星位置的插值,故进行了初步学习:进行卫星位置插值的原因:无论是广播星历还是精密星历,播报卫星位置的时间间隔都较长。在结算每个历元接收机位置时,与该历元对应的卫星位置的选取就会有较大偏差,比如:观测值历元是2021 5 11 0 0 0.00000000,因此我们需要改历元时刻的卫星位置进行接收机位置的结算,但是由于星历文件只提供了2021 5 11 2 0 0.00000000(一般广播星历)或者是2021 5 11 0 15 0.000000.

阿里数据中台七年演化史——行在口述干货_奇点云的博客-程序员宅基地

口述/行在整理/何口述者行在(张金银),奇点云CEO,阿里巴巴第一个数据仓库的创建者,阿里巴巴第一个消费者数据平台TCIF的创建者,阿里云数据智能平台数加的创始人,2004年以数据技术专家身份加入阿里巴巴以来,12年来一直投身于大数据事业。2016年离开阿里巴巴,创立奇点云,旨在用「AI驱动的数据中台」赋能线下,让商业更智能。2009年,阿里云开启了中国的云时代。十年市场教育,中国的公...

云计算之openstack-newton版搭建(六)_weixin_34284188的博客-程序员宅基地

nova计算节点服务安装安装配置计算节点安装软件包#yuminstallopenstack-nova-compute-y2.编辑/etc/nova/nova.conf12345[[email protected]~]#cd/etc/nova/[[email protected]]#cpnova.confnova.conf.bak[[email protected]

推荐文章

热门文章

相关标签