专栏首页用户7363577的专栏智能搜索框实现思路--源码和流程图详解

智能搜索框实现思路--源码和流程图详解

我们在浏览各大网站的时候,包括百度、淘宝、京东、雅虎等等网站,当我们输入一个单词或者文字的时候,下面会有一行行待选项供我们选择,很多的公司在做网站的时候也会考虑到这块,那么我们今天就简单的说一下实现的思路,简单的把代码写一下!

首先我们看一下做好的例子和我画的流程图以便于大家理解这块!

首先是完成的例子:

例子

流程图:

PS:源码不是我写的,我只是有这个需求,就找了一下源码根据自己的需求改了一下,源码出自一个博友的博客,他的源码写的也很详细,大家感兴趣可以去搜一下!

下面我们简单的看一下代码:

H5源码:

<!DOCTYPE html>
<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="js/jquery-1.11.2.min.js" type="text/javascript"></script>
	<script src="js/testcode.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //(这里是可以直接请求接口取到数据,就和直接调用一个testcode.js是一样的)
        var test_list = test_list;
        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) {
					/* 控制一下显示的个数 */
					if(i>5){
						return;
					}
                    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);
            });
        });
		/* 搜索的函数 */
		function _serchfun(){
			var search_text = $("#search_text").val();
			/* 执行ajax调用接口,接口实现的功能是完成搜索和将数据存储到备选的数据库里面 */
		}
    </script>
</head>
<body>
    <div class="search">
        <input type="text" id="search_text" />
        <div id="auto_div">
        </div>
		<input type="button" value="搜索" οnclick="_serchfun"/>
    </div>
</body>
</html>

js源码:

 /* 
 aim:数据预备
 author:clearlove
 date:2018-7-19
 declare:这里是一个预备的数据,可以根据用户输入的习惯和记录将改js更新,然后将数据倒序排列,这样每一次显示的就是用户之前最后输入的数据可以实现一个比较智能的效果,
          每一次用户点击输入框的时候触发的是ajax调用的接口,然后每一次用户输入结束以后确认搜索的东西才触发存储的函数
 */
 var test_list = ["手机", "智能手机", "诺基亚", "天宇", "金立", "小米", "小辣椒", "美图", "威图", "三星", "洗衣机", "榨汁机", "智能设备", "小爱音响"];

解释一下里面几个需要注意的地方

第一:一般的话我们是需要搜索数据库里面所有关于用户输入的字段的信息的,但是用户没有输入的时候我们是默认显示5条或者更多的。

第二:有很多的网站做法是相关推荐,举个例子,用户输入手机的时候,里面会出现很多关于手机的信息和品牌,这种做法的话我这个流程图就已经满足不了了,等到有需求的时候我会写一个解决方案的!

第三:其实所谓的智能也不过是拿到数据数据根据用户输入的信息来分析可能出现的文字,这个呢有几个问题,第一就是用户多的时候是不是需要每一个用户一个类似的数据库出来,第二就是当用户输入的数据过少的时候我们根据什么推送可能出现的信息?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js的常见的三种密码加密方式-MD5加密、Base64加密和解密和sha1加密详解总结

    写前端的时候,很多的时候是避免不了注册这一关的,但是一般的注册是没有任何的难度的,无非就是一些简单的获取用户输入的数据,然后进行简单的校验以后调用接口,将数据发...

    何处锦绣不灰堆
  • 前端H5怎么简单的实现复制text内容的操作

    首先说明一下写这个的原因,现在不管是什么类型的网站,不管你访问的是什么类型的网址,进去以后你想要保存一些东西很简单,直接右键选择复制就可以了,这个是Windo...

    何处锦绣不灰堆
  • jQuery调取微信摄像头代码记录

    我们在写不管是小程序还是微信公众号的时候,调取微信的摄像头的接口都是避免不了的,那么调取微信的摄像头的接口还是需要注意一些问题的,不然可能调取不成功,下面我简单...

    何处锦绣不灰堆
  • 我自己开发的工具,打印出百度贴吧某用户发表过的所有帖子

    Jerry Wang
  • 我自己开发的工具,打印出百度贴吧某用户发表过的所有帖子

    Jerry Wang
  • 深入浅出JavaScript之闭包(Closure)

    阅读目录 闭包-无处不在 闭包的概念 闭包的用途 闭包-封装 常见错误之循环闭包 思考题 闭包(closure)是掌握Javascript从人门到深入一个...

    逸鹏
  • 10个短小却超实用的JavaScript代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我...

    企鹅号小编
  • H5(drag,百度地图使用,requestFullscreen,H5应用缓存)

    天天_哥
  • js倒计时,秒倒计时,天倒计时

    距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天...

    用户3055976
  • JavaScript笔记整理

    整理一篇工作中的JavaScript脚本笔记,不定时更新,笔记来自网上资料或者自己经验归纳。

    SmileNicky

扫码关注云+社区

领取腾讯云代金券