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. GO网络编程(二)

    [[Go语言系列视频]老男孩带你21周搞定Go语言[全 242]] https://www.bilibili.com/video/BV1fD4y117Dg/?p=113&share_sourc ...

  2. 轻松理解Java中的public、private、static和final

    一.概念 1.public和private 两个都是访问权限修饰符,用于控制外界对类内部成员的访问. public:表明对象成员是完全共有的,外界可以随意访问.用public修饰的数据成员.成员函数是 ...

  3. Mybatis（日志工厂）

    日志工厂 如果一个数据库操作,出现了异常,我们需要排错.所以日志就是最好的助手 曾经:sout.debug 现在:日志工厂 SLF4J[工作中,springboot] LOG4J[掌握] LOG4J2 ...

  4. Variable 'xxxx' is accessed from within inner class, needs to be final or effectively final-Lambda 表达式的变量与作用域

    问题的原因 问题代码: public static void main(String[] args) { Integer sum = 0; Integer count = 0; List<Int ...

  5. CRM系统化整合从N-1做减法实践

    1 背景 京销易系统已经接入大网.KA以及云仓三个条线商机,每个条线商机规则差异比较大,当前现状是独立实现三套系统分别做支撑. 2 目标 2022年下半年CRM目标是完成9个新条线业务接入,完成销售过 ...

  6. Linux 脚本：shell

    # 以脚本所在目录作为脚本执行时的当前路径. -P 选项寻找物理上的地址,忽略软连接. SCRIPT_DIR=$(cd $(dirname $0); pwd -P) # 在任意位置执行自己的可执行程序 ...

  7. Bash 内建命令

    官方文档 Bash内建命令 查看命令是否为Bash内建命令

  8. 【译】为你的 ASP. NET Core Web API 创建 Microsoft Power App

    通过轻松创建 Web API 前端来提升您的开发体验. 低代码工具在开发人员中越来越流行,因为用更少的代码更快地创建应用程序.在 Visual Studio 2022 17.6 预览版2中,您现在可以 ...

  9. [db2]缓冲池管理

    简介 缓冲池指的是从硬盘读取表和索引数据时,数据库管理器分配的用于高速缓存这些表和索引数据的内存区域.每个数据库都必须具有至少一个缓冲池,创建数据库时会自动创建一个名为IBMDEFAULTBP的缓冲池 ...

  10. JS标识符

    什么是标识符? 变量名 函数名 属性名都称为标识符. 定义标识符规范如下 1) 标识符只能由字母 数字 下划线 $组成. 2) 标识符不能以数字开头,例如: 1name. 3) 标识符不能实JS中的关 ...