1.js仿百度搜索框

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script>

      function show(json){

        let oUl=document.getElementById('ul1');

        oUl.innerHTML='';

        json.s.forEach(str=>{

          let oLi=document.createElement('li');

          oLi.innerHTML=str;

          oUl.appendChild(oLi);

        })

      }

    </script>

    <script>

      window.onload=function(){

        let oTxt=document.getElementById('txt1');

        let oUl=document.getElementById('ul1');

        oTxt.oninput=function(){

          let oS=document.createElement('script');

          oS.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`;

          document.head.appendChild(oS);

        }

      }

    </script>

  </head>

  <body>

<input type="text" id="txt1">

<ul id="ul1">

</ul>

  </body>

</html>

2.jq仿百度搜索框

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script type="text/javascript" src="jquery.js">

    </script>

    <script>

      $(function(){

        $('#txt1').on('input',function(){

          $.ajax({

            url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',

            data:{wd:$('#txt1').val()},

            dataType:'jsonp',

            jsonp:'cb',

            success(json){

              $('#ul1').html('');

              json.s.forEach(str=>{

                $(`<li>${str}</li>`).appendTo($('#ul1'));

              })

            },

            error(){

              alert('错了')

            }

          })

        })

      })

    </script>

  </head>

  <body>

<input type="text" id="txt1">

<ul id="ul1">

</ul>

  </body>

</html>

js仿百度搜索框的更多相关文章

  1. js实现百度搜索框滑动固定顶部

    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

  2. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

  3. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  4. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  5. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  7. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  8. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  9. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  10. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

随机推荐

  1. mybatis 部分符号需转译 及 IF如何正确判断单个数字字符

    mybatis 部分符号需转译 及 IF如何正确判断单个数字字符 1.Mybatis 转译字符如下下法即可: oracle中的日期查询在mybatis中写法可以参考如下:注意提交时间的<号是用特 ...

  2. 从零玩转SpringBoot3-快速入门

    一.简介 1.前置知识 ​ ● Java17 ​ ● Spring.SpringMVC.MyBatis ​ ● Maven.IDEA 2.环境要求 环境&工具 版本(or later) Spr ...

  3. 全网最详细4W字Flink入门笔记（下）

    本文已收录至Github,推荐阅读 Java随想录 微信公众号:Java随想录 目录 Flink State状态 CheckPoint & SavePoint CheckPoint原理 Sav ...

  4. Kerberos、黄金票据与白银票据

    kerberos Kerberos是一个网络认证协议,用于验证用户和服务之间的身份,解决分布式计算环境中的身份验证问题.它使用加密技术来提供安全的身份验证,并防止网络中的身份欺骗攻击.Kerberos ...

  5. 使用Hexo搭建个人博客网站

    参考CSDN上的博客.特此感谢wsmrzx.

  6. 【MAUI Blazor踩坑日记】6.mac标题栏颜色修改

    MAUI中mac的标题栏颜色默认是灰白色的,有一点丑 如果我们想要自定义颜色,并且在运行时也能更改颜色,该怎么办呢 万幸从一个GitHub库中借鉴到了办法 https://github.com/Ben ...

  7. java volatile是如何保证可见性的？

    lock前缀指令干的事. volatile 修饰的变量在进行写操作时会多出一条如下的汇编指令: lock addl $0x0,(%esp) volatile就是靠这个lock前缀指令去实现可见性的,当 ...

  8. 【Azure Event Hub】Event Hub的Process Data页面无法通过JSON格式预览数据

    问题描述 在Event Hub的门户页面中,可以通过Process Data页面查看Event Hub中的数据,但是当使用JSON格式预览时(View in JSON),却出现错误. 消息一: No ...

  9. Burnside 定理

    Burnside 定理 问题: 给定一个 \(n\) 个点,\(n\) 条边的环,有 \(m\) 种颜色,给每个顶点染色,问有多少种本质不同的染色方案,答案对 \(10^9+7\) 取模 注意本题的本 ...

  10. 交换分区swap的创建与管理

    前言 swap分区是linux系统中一块特殊的硬盘空间,当实际内存不够用的时候,系统会按照一定的算法将部分不用的数据放在swap分区中,从而为当前运行的程序腾出足够的内存空间.好处在于避免内存资源不足 ...