仿百度输入框智能提示的js代码


Posted in Javascript onAugust 22, 2013

最近客户需求老是变更,不过有些是因为客户催得急,我没有那么快能完成,所以先做了一个雏形给他们,后来再慢慢改。比如雏形那里我做了一个下拉列表给他们,事实上他们的数据有200多条,用个下拉列表的话很不现实,你能找那么多?而且那个下拉列表该有多长啊?所以很自然的,我想到了百度那个智能提示的功能。

参考了一下之前忘记是哪位大侠写的东西,他的是使用百度api的,为了简单起见,我把数据都定在了js那里,这样看官们容易理解一些。

还是整个代码考上来吧,代码不长。考了一下之前忘记是哪位大侠写的东西,他的是使用百度api的,为了简单起见,我把数据都定在了js那里,这样看官们容易理解一些。

<!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>
    <title></title>
    <style type="text/css">
        .search
        {
            left: 0;
            position: relative;
        }
        #auto_div
        {
            display: none;
            width: 300px;
            border: 1px #74c0f9 solid;
            background: #FFF;
            position: absolute;
            top: 24px;
            left: 0;
            color: #323232;
        }
    </style>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //测试用的数据
        var test_list = ["小张", "小苏", "小杨", "老张", "老苏", "老杨", "老爷爷", "小妹妹", "老奶奶", "大鹏", "大明", "大鹏展翅", "你好", "hello", "hi"];
        var old_value = "";
        var highlightindex = -1;   //高亮
        //自动完成
        function AutoComplete(auto, search, mylist) {
            if ($("#" + search).val() != old_value || old_value == "") {
                var autoNode = $("#" + auto);   //缓存对象(弹出框)
                var carlist = new Array();
                var n = 0;
                old_value = $("#" + search).val();
                for (i in mylist) {
                    if (mylist[i].indexOf(old_value) >= 0) {
                        carlist[n++] = mylist[i];
                    }
                }
                if (carlist.length == 0) {
                    autoNode.hide();
                    return;
                }
                autoNode.empty();  //清空上次的记录
                for (i in carlist) {
                    var wordNode = carlist[i];   //弹出框里的每一条内容
                    var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
                    newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
                    newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框
                    //鼠标移入高亮,移开不高亮
                    newDivNode.mouseover(function () {
                        if (highlightindex != -1) {        //原来高亮的节点要取消高亮(是-1就不需要了)
                            autoNode.children("div").eq(highlightindex).css("background-color", "white");
                        }
                        //记录新的高亮节点索引
                        highlightindex = $(this).attr("id");
                        $(this).css("background-color", "#ebebeb");
                    });
                    newDivNode.mouseout(function () {
                        $(this).css("background-color", "white");
                    });
                    //鼠标点击文字上屏
                    newDivNode.click(function () {
                        //取出高亮节点的文本内容
                        var comText = autoNode.hide().children("div").eq(highlightindex).text();
                        highlightindex = -1;
                        //文本框中的内容变成高亮节点的内容
                        $("#" + search).val(comText);
                    })
                    if (carlist.length > 0) {    //如果返回值有内容就显示出来
                        autoNode.show();
                    } else {               //服务器端无内容返回 那么隐藏弹出框
                        autoNode.hide();
                        //弹出框隐藏的同时,高亮节点索引值也变成-1
                        highlightindex = -1;
                    }
                }
            }
            //点击页面隐藏自动补全提示框
            document.onclick = function (e) {
                var e = e ? e : window.event;
                var tar = e.srcElement || e.target;
                if (tar.id != search) {
                    if ($("#" + auto).is(":visible")) {
                        $("#" + auto).css("display", "none")
                    }
                }
            }
        }
        $(function () {
            old_value = $("#search_text").val();
            $("#search_text").focus(function () {
                if ($("#search_text").val() == "") {
                    AutoComplete("auto_div", "search_text", test_list);
                }
            });
            $("#search_text").keyup(function () {
                AutoComplete("auto_div", "search_text", test_list);
            });
        });
    </script>
</head>
<body>
    <div class="search">
        <input type="text" id="search_text" />
        <div id="auto_div">
        </div>
    </div>
</body>
</html>

大家复制代码的时候记得把jquery带上,不然出错了又要来骂娘了……

说说主要的思路吧。

首先,把数据弄成一个js数组,然后遍历这个数组,每一条数据生成一个div,然后添加到auto_div这个div里,还要设置一下鼠标移过高亮,移开恢复正常,以及点击的时候自动填上文本框里,还有鼠标在网页点击的时候列表框会消失——当然还有更多细节要注意,这里只是举个例子。怎样让文本框里的文本改变的时候就触发AutoComplete事件呢?用onchange?错,onchange是文本框失去光标的时候才会触发,所以使用keyup事件会好一点。

别的不多说,代码也不难看懂,原理也很简单。我要强调的一点是,像这种智能提示功能可能有些新手会想到用模糊搜索,当文本框里的文本改变的时候就去查一下数据库,把返回的数据列出来——这是不好的做法,我不说他错误因为这样确实可行,但是这会给服务器造成太大的负担,每改变一下文本就查一下数据库,就好像我每要一样东西就要向你问一下一样,倒不如你一次把它们全给我,我要什么自己选。当然凡事都有两面性,把所有数据一次性查出来的后果是耗内存,大数据不建议这样做,这种做法适用于大部分情况,因为大部分情况都不是大数据——大数据的,另想它法。

最后说说我的感受:之前面试过前端工程师,那时候人家觉得我还嫩,确实那时候特嫩。现在,我在前端的领域正开始慢慢强大起来,虽然公司没有前端工程师,但是我还是觉得前端很重要,我要合理运用前端来解决一些用前端很简单就能解决的问题,而不是丢给后台来处理。

在公司做着做着,虽然跟别人学到的东西不多,但是需求来了,自己想办法以及在网上找一些解决方案,自己也学到不少东西。继续做,加油!

Javascript 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 #Javascript
JavaScript中的eval()函数详解
Aug 22 #Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 #Javascript
jquery重新播放css动画所遇问题解决
Aug 21 #Javascript
JS性能优化笔记搜索整理
Aug 21 #Javascript
JS检测图片大小的实例
Aug 21 #Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 #Javascript
You might like
cmd下运行php脚本
2008/11/25 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
Javascript事件实例详解
2013/11/06 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
南京软件公司的.net程序员笔试题
2014/08/31 面试题
喝酒检查书范文
2014/02/23 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
高一数学教学反思
2016/02/18 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL