上效果：

主要思路:

函数indexOf() 、join()、innerHTML的使用，还有 用完的数组要清空

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         body {

             font-size: 20px;

         }

         .box {

             width: 600px;

             height: 40px;

             margin: 200px auto;

             position: relative;

         }

         #txt {

             width: 488px;

             height: 38px;

             border: 1px solid #3385ff;

             font-size: 20px;

             float: left;

             outline: none;

             padding-left: 10px;

         }

         #search {

             width: 100px;

             height: 40px;

             float: left;

             border:0 none;

             background-color: #3385ff;

             color:#fff;

             cursor: pointer;

         }

         #keywords {

             position: absolute;

             top: 40px;

             left: 0;

             background-color: rgb(12, 255, 24);

             list-style: none;

             width: 500px;;

         }

         li {

             line-height: 24px;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <div class="baidu">

         <input type="text" id="txt"/>

         <input type="button" value="百度一下" id="search"/>

     </div>

     <ul id="keywords"></ul>

 </div>

 <script>

     // 这里是模拟我们的数据库

     var keywords = ["冬天吃什么","冬天的离别","冬天有多冷","林丹林丹","林丹夺冠","123","123456","JavaScript","Java","黄鳝","黄鳝煮汤","黄鳝煮粥","咸鱼","咸鱼茄子煲","咸鱼翻身","十九大","十八大","十全十美"];

     var txt = document.getElementById('txt');

     var search = document.getElementById('search');

     var ul = document.getElementById('keywords');

     txt.onkeyup = function () {

         // 取出目前输入的关键字

         var txtValue = txt.value.trim();

         //存储与当前关键字相关的字符串信息的数组

         var aimArr = [];

         for(var i = 0 ; i < keywords.length ; i++ ) {

             // keywords数组中的字符串是否含义该关键字，含有的话存储进aimArr

             if(keywords[i].indexOf(txtValue) != -1) { // 没有返回-1

                 aimArr.push(keywords[i]);

             }

         }

         // 如果输入为空

         if (txtValue.length == 0 ) {

             aimArr = [];

         }

         // 把aimArr设置进ul中js动态添加的li里面

         // 创建li

         var lis = []; // 新创建的li存储在lis数组里面

         for(var i = 0 ; i < aimArr.length ; i++ ) {

             lis.push("<li>"+aimArr[i]+"</li>");

         }

         // 把lis数组转为字符串，添加进ul中

         ul.innerHTML = lis.join("");

     }

 </script>

 </body>

 </html>

JavaScript--模拟百度搜索下拉li的更多相关文章

  1. vue实现百度搜索下拉提示功能

    这段代码用到vuejs和vue-resouece.实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索 <!DOCTYPE html> <html lang=" ...

  2. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  3. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  4. 利用 lucene.net 实现高效率的 WildcardQuery ，记一次类似百度搜索下拉关键字联想功能的实现。

    打开百度输入  站内搜索也要实现类似功能.最基础的做法,写个方法查数据库搜索历史综合表keywordSearch(先将被搜索过的关键字记录到一张表,记录好他们被搜索的次数.上次搜索的有多少结果) 大概 ...

  5. z-blog博客组插件openSug.js百度搜索下拉框提示代码

      z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...

  6. JavaScript实现百度搜索页面

    JavaScript实现百度搜索页面 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  7. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  8. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

随机推荐

  1. 基于TensorFlow理解CNN中的padding参数

    1 TensorFlow中用到padding的地方 在TensorFlow中用到padding的地方主要有tf.nn.conv2d(),tf.nn.max_pool(),tf.nn.avg_pool( ...

  2. PHP 缓存详解

    为什么要使用缓存 一个网站或者一个应用的标准流程是浏览器向应用服务器发出请求,应用服务器做一些计算和逻辑判断之后再请求数据库,数据库收到请求后在经过计算将数据返回给应用服务器,应用服务器再次计算后把数 ...

  3. 浓缩版 《C和指针》基础篇（Chpt.1~Chpt.9)

    导语 近日,笔者在课业之余阅读了<C和指针(Pointers on C)> (by Kenneth A.Reek)一书,从中记录了关于C语言的诸多知识点,包括在C语言基础特性的学习过程中没 ...

  4. nodejs+express 初学（三）

    Nodejs 的模块,nodejs中每一个js文件都是独立的,不用担心他们中的变量会相互覆盖 模块是 Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个Node.js 文件就 ...

  5. 二、Web Service开发(.net)

    .net平台内建了对Web Service的支持,包括Web Service的构建和使用.与其它开发平台不同,使用.net平台,你不需要其他的工具或者SDK就可以完成Web Service的开发了.. ...

  6. Armijo线性搜索

    用“人话”解释不精确线搜索中的Armijo-Goldstein准则及Wolfe-Powell准则 line search(一维搜索,或线搜索)是最优化(Optimization)算法中的一个基础步骤/ ...

  7. Hadoop Serialization -- hadoop序列化详解 (2)【Text,BytesWritable,NullWritable】

    回顾: 回顾序列化,其实原书的结构很清晰,我截图给出书中的章节结构: 序列化最主要的,最底层的是实现writable接口,wiritable规定读和写的游戏规则 (void write(DataOut ...

  8. BZOJ2120&&2453 数颜色&&维护队列

    2453: 维护队列 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1442 Solved: 678 [Submit][Status][Discuss ...

  9. 洛谷 3089 [USACO13NOV]POGO的牛Pogo-Cow

    单调队列优化dp; 对于每个点开个单调队列,按转移到它的点到它的距离从大到小,得分也从大到小排列. 每次枚举当前点前面的所有点,对于每个点的队列中二分一个距离小于等于它到当前点的答案值,放到当前点的队 ...

  10. jQuery事件绑定的四种方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...