输入框联想输入

最新推荐文章于 2023-10-09 11:11:17 发布

weixin_33716154

最新推荐文章于 2023-10-09 11:11:17 发布

阅读量200

点赞数

原文链接：http://blog.51cto.com/13479739/2177934

版权

笔者，不玩网游还差4天就两个月了。我常常觉得，过往的都是不堪回首的，但现在又何尝不是。有时候，我的脑海里会浮现一首歌：“早知道是这样像梦一场，我才不会把爱都放在同一个地方”。只有一句，来来回回的重复나는 당신을 좋아합니다. 어떤 종류의 자격이 필요한지。상처를 입지 않고 타박상을 입지 않도록 고의로 거리를 유지해야합니다。
输入框的联想输入，有许多的实现方式。在这里，笔者只是挑一种实现了其中的原理，至于细节优化，见仁见智了。
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 style="text-align:center;margin:50px 0; font:normal 14px/24px 'microsoft yahei';">
                </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、优化：
谁用谁优化。

转载于:https://blog.51cto.com/13479739/2177934

weixin_33716154

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
输入框联想输入

笔者，不玩网游还差4天就两个月了。我常常觉得，过往的都是不堪回首的，但现在又何尝不是。有时候，我的脑海里会浮现一首歌：“早知道是这样像梦一场，我才不会把爱都放在同一个地方”。只有一句，来来回回的重复나는 당신을 좋아합니다. 어떤 종류의 자격이 필요한지。상처를 입지 않고 타박상을 입지 않도록 고의로 거리를 유지해야합니다。输入框的联想输入，有许多的实现方式。在这里，笔者只是挑一种实现了...
复制链接

扫一扫