输入框实现联想输入

发布时间:2020-05-07 17:29:04 作者:Leah
来源:亿速云 阅读:306

今天小编就为大家带来一篇输入框实现联想输入的文章。小编觉得挺不错的,为此分享给大家做个参考。一起跟随小编过来看看吧。

1、利用autocomplete:简单的实现代码

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>jQuery文本框联想补全自动完成插件</title>
                <link rel="stylesheet" href="css/autocomplete.css">
                <link rel="stylesheet" href="css/style.css">
            </head>

            <body>
                <div id="demo">
                    <div class="wrapper">
                        <div id="search-form"></div>
                    </div>
                </div>
                <div >
                </div>
            </body>
            <script type="text/javascript" src="js/jquery.js"></script>
            <!--   与jquery.autocomplete.js不同哦 -- >
            <script type="text/javascript" src="js/autocomplete.js"></script>
            <script>
                //考虑,从数据库获取这样的数据。根据人员选择的个性化数据
                //考虑,搜索事件用户的输入数据进行个性化存储
                var proposals = [
                    '一低昂要减肥啊', '减肥疗法', '饥饿减肥',
                    '运动减肥', 'red_ant', 'drink', 
                    'beer', 'fruit', '手套',
                    'hotel', '小黄车', '哈哈哈',
                    'motorbike', '该减肥了', '请减肥',
                    '减肥'
                    ];
                $(document).ready(function() {
                    $('#search-form').autocomplete({
                        hints: proposals,
                        width: 300,
                        height: 30,
                        onSubmit: function(text) {
                            alert(text);
                        }
                    });
                });
            </script>
        </html>

2、实现效果:

输入框实现联想输入

3、不足之处:
可以看出,我们的一些数据如:drink、beer、fruit等带有“r”的词汇并没有查出。

输入框实现联想输入

4、兼容性:

输入框实现联想输入

可以看出IE5以及IE5+都是支持的。

5、优化:
谁用谁优化。

关于输入框实现联想输入就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

推荐阅读:
  1. vue怎么实现输入框自动跳转功能
  2. vue如何实现输入框的模糊查询

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

输入框 联想输入

上一篇:关于EV SSL证书的相关介绍

下一篇:通配符SSL证书的优缺点有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》