简书搜索自动匹配功能

写在前面

今天周六,我又来分享知识啦。最近一直在忙项目,所以趁着这个周末,喝着咖啡,听着音乐,敲着代码就把做项目的知识点总结给大家,简直不要太惬意,哈哈。

先从我做的功能界面开始说起:

本篇主要介绍的就是图中红框标记的搜索自动匹配功能。仔细想一想,有木有很熟悉,对,这功能其实就是跟你每天百度、谷歌这样的搜索功能一样。所以下面我会分享一些知识点并写个例子来实现这样的功能。

每天都用到的搜索自动匹配功能

百度的搜索框(默认显示四条数据)

美团搜索框

美团.jpg

淘宝搜索框

首先,大概过程肯定是这样的:先从输入框中输入关键字,然后根据关键字在缓存或数据库取数据返回显示在下方区域。

重点知识汇总

要实现此功能,JQuery+ajax是必备。这个功能需要服务端配合。客户端通过ajax从服务端取得的数据。下面,我写个简书搜索自动匹配的例子,数据是事先定义好在脚本里的,当然,如果我有访问简书数据库的权限和账号密码,就可以动态的获取实时数据了。

开始之前,先给大家普及一下例子中用到的重点知识。

知识点一

keydown(function(e){}

这个keydown函数是当按下按键时触发事件,比如改变文本域的颜色。
比如这段代码:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").keyup(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>

变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性。

知识点二

 var keycode = e.which ? e.which : e.keyCode;

这句代码是为了兼容浏览器按键事件对象的按键码属性, 如IE中,只有keyCode属性,而FireFox中有which和charCode属性,Opera中有keyCode和which属性等。

知识点三

if(keycode == 38){}

常用按键码与按键关系对应表

知识点四

onKeyUp 事件:onkeyup 事件会在键盘按键被松开时发生。

知识点五

blur() 方法:当失去焦点 (blur) 时触发事件,比如输入域失去焦点改变其颜色。
removeClass() 方法:从被选元素移除一个或多个类。
addClass()方法:向被选元素添加一个或多个类。

整体思路及完整代码:

首先在输入框上注册keyup事件,然后在事件中获取我实现定义的data对象数组(一般实时数据通过ajax获取json对象)。取得数据后,在下方区域就可以显示数据了,当我们点击每一项的时候,就可以响应事件。同时根据索引值来调整背景高亮。

html代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>简书自动搜索功能例子</title>
  <meta name="Author" content="wblearn">
  <meta name="Keywords" content="//www.greatytc.com/users/48599dc7ef1b/latest_articles">
  <meta name="Description" content="简书自动搜索功能例子">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" media="all" href="http://cdn-qn0.jianshu.io/assets/base-00828532d00225531ad20ff45bf311ea.css">
  <link rel="stylesheet" media="all" href="http://cdn-qn0.jianshu.io/assets/reading-note-31f4bce318acdaac0a693701a57737e3.css">
  <link rel="stylesheet" media="all" href="http://cdn-qn0.jianshu.io/assets/base-read-mode-5f4051bc94fc595e8bc00821aae6c3e1.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://cdn-qn0.jianshu.io/assets/modernizr-613ea63b5aa2f0e2a1946e9c28c8eedb.js"></script>
  <style type="text/css">
    #container{
        position:absolute;
        left:50%;
        top: 40%;
    }
    #content{
        float:left;
        position:relative;
        right:50%;
    }
    input{
        border:0;
        width:288px;
        height:30px;
        font-size:16px;
        padding:0 5px;
        line-height:30px;
    }
    .item{
        padding:3px 5px;
        cursor:pointer;
    }
    .addbg{
        background:#87A900;
    }
    .first{
        border:solid #87A900 2px;
        width:300px;
    }
    #append{
        border:solid #87A900 2px;
        border-top:0;
        display:none;
    }

img {
    max-width: 100%;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

font{
    margin-left: 20px;
    margin: 10px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    color: inherit;
    text-rendering: optimizelegibility;
}
  </style>
 </head>
 <body>
    <div id="container">
    <div id="content">
        <div class="first"><input id="kw" onKeyup="getContent(this);" /></div>
        <div id="append"></div>
    </div>
    </div>
 </body>
</html>

js代码:

<script type="text/javascript">
var data = [
    "![](http://upload-images.jianshu.io/upload_images/2556999-22446bcad2b99d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书IT·互联网专题</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-353d731adf3d34b5?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书IT·互联网主编: 向右奔跑</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-8d748c1a7d13141f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书程序员专题</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-3c4eb4a2985e9153.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书程序员主编: 小彤花园</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-2a1db48c8c206301.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书连载小说专题</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-7dc7674754b2227e?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书连载小说主编: 一鸣</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-b4940e07ef6bbe3f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书诗专题</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-f90e0cb9a13c11db.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书诗主编:北海源</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-bad95d5bf57a8399.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书其他专题</font>",
    "![](http://upload-images.jianshu.io/upload_images/2556999-90cdc692578d6c92?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"+"  <font>简书其他主编</font>"
];
$(document).ready(function(){
    $(document).keydown(function(e){
        e = e || window.event;
        var keycode = e.which ? e.which : e.keyCode;
        if(keycode == 38){
            if(jQuery.trim($("#append").html())==""){
                return;
            }
            movePrev();
        }else if(keycode == 40){
            if(jQuery.trim($("#append").html())==""){
                return;
            }
            $("#kw").blur();
            if($(".item").hasClass("addbg")){
                moveNext();
            }else{
                $(".item").removeClass('addbg').eq(0).addClass('addbg');
            }
           
        }else if(keycode == 13){
            dojob();
        }
    });

    var movePrev = function(){
        $("#kw").blur();
        var index = $(".addbg").prevAll().length;
        if(index == 0){
            $(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
        }else{
            $(".item").removeClass('addbg').eq(index-1).addClass('addbg');
        }
    }
   
    var moveNext = function(){
        var index = $(".addbg").prevAll().length;
        if(index == $(".item").length-1){
            $(".item").removeClass('addbg').eq(0).addClass('addbg');
        }else{
            $(".item").removeClass('addbg').eq(index+1).addClass('addbg');
        }
       
    }
   
    var dojob = function(){
        $("#kw").blur();
        var value = $(".addbg").text();
        $("#kw").val(value);
        $("#append").hide().html("");
    }
});
function getContent(obj){
    var kw = jQuery.trim($(obj).val());
    if(kw == ""){
        $("#append").hide().html("");
        return false;
    }
    var html = "";
    for (var i = 0; i < data.length; i++) {
        if (data[i].indexOf(kw) >= 0) {
            html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
        }
    }
    if(html != ""){
        $("#append").show().html(html);
    }else{
        $("#append").hide().html("");
    }
}
function getFocus(obj){
    $(".item").removeClass("addbg");
    $(obj).addClass("addbg");
}
function getCon(obj){
    var value = $(obj).text();
    $("#kw").val(value);
    $("#append").hide().html("");
}
</script>

写在最后

以上就是我总结分享搜索自动匹配功能的全部内容,当然,界面我还可以做得更美观,功能可以做的更完善。今天先到这里,下次见(持续更新中......)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,777评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,365评论 0 17
  • 昨晚失眠,辗转反侧方才入睡,却也睡不安生。 貌似是看他来了请闭眼留下的后遗症,有段时间睡梦中总是血腥场面,每每...
    二默菇凉阅读 190评论 0 0
  • 前言:魏晋南北朝长达350年的历史,比隋唐以来任何一个朝代的历史都要长。漫漫长河,涌现了无数文人武将,但是历史记载...
    木不周阅读 1,868评论 5 10
  • 弃我去者,昨日之事不可留, 乱我心者,今日之事多烦忧。 往昔历历皆可数, 翻开幸福之路, 欢声笑语几度, 叹匆匆那...
    化茧成蝶_219a阅读 403评论 0 0