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. 关于ChatGPT与机器时代的展望

    关于 ChatGPT 与机器时代的展望 机器人这一概念,最初不是出自计算机科学家或工程师之手,而是来自于捷克的戏剧家卡雷尔·恰佩克(Karl Capek)在 1920 年编排的一出名为"罗森 ...

  2. 如何在 Windows Server 2022 阿里云服务器上搭建自己的 MQTT 服务器。

    一.简介 最近,在做一个项目的时候,需要在线管理网络继电器,以前也做过硬件的项目,但是这样的项目不多.现在我想实现一个在线可以接受网络继电器发送的信号,也可以向网络继电器发送命令,控制其的运行.这个功 ...

  3. MiniNK WEB 选拔题 by F12

    Start 除了梦想外一无所有的我们,将会和蔑视与困境做最后的斗争,这是最后一舞 N0wayBack 联合战队成立以来一直致力于信息安全技术的研究,作为联合战队活跃在各大 CTF (信息安全竞赛)赛事 ...

  4. Vue-treeselect 实现下拉树懒加载，末节点不要箭头

    项目需要,可选择的下拉树,由于数据过多,显示要有层级感,所以使用了懒加载模式 vue-treeselect官网:https://www.vue-treeselect.cn/ 1.前端代码 1.下载依赖 ...

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

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

  6. Linux 使用grep过滤字符串中的指定内容

    命令示例:echo port 1234 123 | grep -oP 'port\s+\K\d+' 返回: 1234 这条命令使用 grep 工具来在文本中查找 "Port " 后 ...

  7. C++ 核心指南之 C++ P.哲学/基本理念（上）

    C++ 核心指南(C++ Core Guidelines)是由 Bjarne Stroustrup.Herb Sutter 等顶尖 C+ 专家创建的一份 C++ 指南.规则及最佳实践.旨在帮助大家正确 ...

  8. Kettle实例(获取Token并带入请求接口拉取数据到本地)

    背景 近期工作中遇到许多需要协同的表单文档被放到云文档,那么我们本地做数据分析就需要先抽取云文档实时数据到本地数据库,根据接口文档我们需要先获取Token,再将返回值带到接口中发起请求拉取数据,因为在 ...

  9. 史上最强.NET数据分页方法

    [前言] 本文讲述的.NET数据分页方法为[史上最强],已被多家大型科技公司实战采用 & 也被圈内多家知名IT培训机构转载收藏. [正文] 支持.Net Core(2.0及以上)与.Net F ...

  10. Dubbo3应用开发——架构的演变过程

    Dubbo3应用开发--架构的演变过程 什么是Dubbo 早期Dubbo的定位: 基于Java的高性能,轻量级的RPC框架:SOA[Service-Oriented Architecture ⾯向服务 ...