45.尚硅谷_jQuery_应用_搜索框功能.avi原创

来我们往下看啊，来我们看下一个，那下一个有这样一个功能，我给大家先演示效果，这里一个输入框啊，输一个，哎，这个列表就出来了。其实这种效果经常有吧，但我这个是个假的啊，因为真实的话是不是显示的应该是跟这个输入的关键字相关的一些条目啊，那我这个条目是个固定的一些条目啊，直接固定条目啊，OK，好，那什么时候这个条目显示呢？就是当我大家看到啊，我们来看一下这里面两个问题，第一个问题条目什么时候显示，第二个问题条目什么时候隐藏是吧，来这样显示了吗？没有，我输入一个显示没有显示了啊，OK，也就是说当我输入了东西，我只要我的这个输入框里面是不是一旦输了东西是不是就会显示好，什么时候隐藏呢？

这叫什么时候失去隐藏这一个输入框，失去焦点的时候是不是好看到回点诶。这个是它既然直接就显示了，说明什么，说明什么时候会显示，获取焦点的时候显示，那获取焦点一定显示吗？不一定啊，你看到没有。也就是说，获取焦点的时候，它必须保证你的这个地方在获取焦点的时候，它会判断你的输入框里面有个文本。对吧，如果有文本是不是才会显示，除了获得焦点会产生显示啊，还有什么时候会产生显示，大家看啊，现在获得焦点显示没有没有，但现在是不是显示了，那这一个是发生了什么事件呢？我得知道啊。

发生什么事？是吧，那这个时候其实我在按键盘啊，有一个有一个事件叫k up。是不是键盘按键抬起的时候啊，当他抬起的时候是不是已经输入了。对不对，能懂不要能懂啊，而且还一个事啊，大家看到这个地方其实。有很多有意思的啊，我我在七键盘显示以后，我要不失去焦点，他可能会隐藏吗。譬如说我要删掉一个，它隐藏吗？没有说明他隐藏，只有一种情况会隐藏，什么情况会隐藏失去焦点，那他什么时候有可能会显示两种情况，一种是什么获得焦点？

对不对，另外一种是什么，是不是键盘什么是不按抬起的时候k up，也就说白了，他监听几个事件，一共三个。三个，一个是fo什么意思？霍焦点跟它对应的是什么？思级焦点，还有一个K2是不能不能理解啊，一共这把三个。啊，一共这么三个，OK，好来啊，那下面呢，我们要去想我们的事件，哎，现在应该知道事件加谁身上了吧，加在谁身上，那不就是这个输入框吗？是不是事件我们名称我们刚才研究过了吧，三个事件对不对？三个事件，那超出的目标，也就是多姆，超出目标是谁呢？

多超纵目标看到这里盯着啊，定好了，看到了吗？看到有谁变化了吗？没看到是不是上面的这个div，这个div就包含那个什么什么东西啊，这是。是不是等于列表啊，啊，就是这个列表，那现在大家应该是非常清楚了，来再来一通啊。我们现在呢去哎，截个图。截个图啊呃，截图的话就非常简单，就截这一段就够了啊，别的也不用截了。下面不用啊，够了，来首先得说我们事件发生在哪个元素上面啊，保存。拉大一点点，嗯，好，我们来看红色的来标明事件发生的元素是不是它呀。

对不对，没理是吧，那发生的是什么事件呢？这个地方啊事件好几个嘞，是吧，有什么k up是吧，其实k up的功能跟那个谁的功能有点类似啊一个还有那个fo，其实他们做的事情是一个事情，就是有可能让那个列表是不是显示出来。好，除了这两个事件，还有什么事间失去什么焦点的事件？这个失去焦点干嘛去？是不是隐藏那个列表，那我怎么找到那个列表了？我要找到那个列表其实非常简单，这里面有一个什么ID，不就找到他吗？对不对啊，操作它的哪些方面呢？不就操作这个东西吗？诶这个颜色不对啊。

这个操作的是他。能看到吧，嗯，好，那咱就做吧，这太简单了啊，这个这个ID叫T的设。这是我们的第三个。创新函数取个名字啊，啥名字我就来个什么涉及了好吧，好来给他什么调用一下，我总写在下面，我感觉特别别扭啊。我应该什么反过来写，因为每次跑到下面去有点难受。啊，写的这么写，这样写的时候能好能能够舒服一点，因为刚好就在这里啊，一写就行好来还是那两个方面啊，对哪个元素加什么阶梯，做什么操作啊来刚才不有个ID吗？叫泰人说他怎么能知道的呀，这就是工具的牛逼之处。

啊OK，因为你是用井号啊，用井号他后面就马上去找所有的ID去跟你匹配。啊，很厉害的啊，啊，接着我要给它加什么监听呢？是不是两个方面啊，大家看看我们一共有有那么几个监听，刚才说过了，看在这里，这个k up和fo是干的事情是一样的，是不是fo和k up干的事情一样，但这个blow是不是干的另外一个事，一个干的显示一个什么隐藏，那我怎么一次性将两个事件，将两个事件监听做同样的事情呢？

能不懂，那当然你可以这么写，怎么写呢？譬如说你写一个blue啊，写一个不写个blue，写个fo啊，再来一个方式是吧，你再写一个，再写一个什么，还有一个K2啊，再写个方式，但是这两个方形里面代码应该什么一样的，对不对，这样是不是有重复的感觉。吧，那怎么办呢？这时候我们可以去用什么呢？用on，哎，这这个大家知道怎么搞出这个东西来吗？见过吗？没见过吧？啊挺方便的，OK啊，就是加一个文件夹啊，能够快速访问。也就是说这个地方有一个工具栏，有一个什么呢？啊，新建工具栏，你去选择一个文件夹目录啊，比如举个例子，就这个走啊就出来了。

啊，其实很简单啊，非常简单，无比简单啊，这个我不要啊，有一个就够了，一般我就是word文档，我就这么搞好来看这里，这里有一个on，我们说on是不是比较通用，它其实还有一个特点，它一次可以加多个事件监听。看这里啊，这个地方它不是event，它是什么even词一个或者什么多个A用什么隔开，这个非常关键，用空格隔开，看到了，那你说我该怎么做啊，我能我还还用这种方式吗？不用我必须去用什么on。

有两个k up，还有什么focus，对，不能不懂啊，好，接着除了这个参数，还有一个参数发过去。是吧，我在这个里面干嘛去，是不是去显示列表，但是它有条件，什么条件。啊，如果输入框有什么文本查干嘛显示是不是一个列表这意思吧，好了，我我先不写直线啊，我们还有一个监听叫什么。是不是不乐四级焦点吗？那你没必要再on了，没有，这一次没有必要用on了，直接来个什么不乐P能这么用，能下面这种用法，那就下面的用法，因为它简单是吧，而这个干嘛去，其实非常简单，就是隐藏什么列表，就这么回事，好，那我们首先我怎么知道输入框有文本呢？

输入框是不是当前发生事件的这个元素？是不是，那我去去取什么this.value各位好，大家看啊，有一个特别的情况，有一个什么特别情况呢？大家看到现在有没有输入，有有没有列表没有，为什么有，因为我没有输入，没有文本嘛，对不对，我按空格写下了吗？没有，说白了你这里文本不能是什么空格，所以我做一件事情干嘛呢干嘛。Train是不是直接它有train的方法能不懂，好这个时候是不是就是我的那个文本对不对，好下面我要干嘛呢，判断我就这么写行不行，可以不这个说明是不是说明他有值。

人说，要这么写不等于什么。何必呢？不这么写就可以了吗？行还是不行，行就说明我这个text有值了啊，因为已经去掉空了，肯定不是空格，对不对啊，有值，那有值的时候我们才干嘛去了显示，那我显示它不有个ID吗？叫设计help，那很好办了，叫设计点什么，把这个拿过来太简单了。

各位，这不就是隐藏吗？好了吧，好了，现在我们就来看我们当前这一个效果是不是好的，首先按下去显示了吗？没有输入空格显示了吗？没有数A显示，没有显示了，那你说我把这个A给干掉，隐不隐藏？隐不隐藏不隐藏，刚刚说了，什么时候才隐藏，失去焦点才隐藏。可以吧，可以还有一个，还有一种情况，A睡觉隐藏了一点显示。啊，做出来了，有人说老师你这么复杂的规律，你怎么你怎么找出来的。这个规律复杂吗？啊，其实说实话并不太复杂啊，只是大家做的相对少一些，大家可能会觉得稍微比简单的要难一点，那肯定比这些要难一点，这些也太明显了啊，这是我们做的第三个功能，这一片都还都还算比较容易啊，好，我把这个给它保存一下啊，已经知道在这了，这是我们的三点偏移，好，接着呢，我们去把它给它提交一下。

来看啊，就在这就在这提交一下，走里把这个勾一下，这个呢，实现的是什么呢？实现的是搜索框的功能吧，啊搜索框功能。

啊，点一下提交啊，提交好了，嗯，没了，好提交好了以后呢，下面我们要去围绕了，大家自己就去update一下，多操作啊多做。