仿百度输入框智能提示的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 相关文章推荐
jQuery自带的一些常用方法总结
Sep 03 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
JS实现轮播图效果
Jan 11 Javascript
vue实现购物车结算功能
Jun 18 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
php根据分类合并数组的方法实例详解
2013/11/06 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
编辑求职信样本
2013/12/16 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
困难补助申请报告
2015/05/19 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle