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. 最近很火的开源培训系统，支持免费商用，3个月1000star！

    项目简介 PlayEdu 开源培训系统自发布以来,3个月内帮助上千位开发者部署了私有化培训平台,并在 Github 上获得了1000star. 项目地址 Github 地址:https://githu ...

  2. Vue基础技术之——数据绑定

    Vue数据大致绑定分为两类: 1.单向数据绑定(v-bind): 数据只能从data流向页面. 2.双向数据绑定(v-model):数据不仅能从data流向页面,还能从页面流向data. 话不多说,先 ...

  3. 现代C++（Modern C++）基本用法实践：五、智能指针

    概述 c++效率较高的一个原因是我们可以自己定制策略手动申请和释放内存,当然,也伴随着开发效率降低和内存泄漏的风险.为了减少手动管理内存带来的困扰,c++提出了智能指针,可以帮助我们进行内存管理,有三 ...

  4. 使用Locust进行性能测试

    当涉及到评估应用程序或服务的性能时,Locust是一个功能强大且易于使用的开源工具.本文将介绍Locust的基本概念和使用方法. 什么是Locust? Locust是一个用于编写.运行和分析负载测试的 ...

  5. WinForm RichTextBox 加载大量文本卡死和UTF-8乱码问题

    在RichTextBox控件的使用中我们会遇到加载TXT文件的问题,通常我们会有两种处理方式. 一.加载TXT字符串,设置到RichTextBox //打开并且读取文件数据 FileStream fs ...

  6. JDBC:使用IDEA配置JDBC

    IDEA使用Jar包 操作流程 步骤1:创建lib路径 步骤2:复制jar包 步骤3:必须要做的一步 参考链接 https://blog.csdn.net/upup1006/article/detai ...

  7. opencv中的函数

    读入图像:cv2.imread(),第一个参数:未文件路径,第二个参数:告诉函数要以何种方式读取图片. cv2.IMREAD_COLOR:读入一幅彩色图像.图像的透明度会被忽略. cv2.IMREAD ...

  8. 助力618-Y的混沌实践之路

    一.写在前面 1.混沌是什么? 混沌工程(Chaos Engineering)的概念由 Netflix 在 2010 年提出,通过主动向系统中引入异常状态,并根据系统在各种压力下的行为表现确定优化策略 ...

  9. VINS中旋转外参初始化

    VINS 中的旋转外参初始化 ​ 为了使这个两个传感器融合,我们首先需要做的事情是将两个传感器的数据对齐,除了时间上的对齐,还有空间上的对齐.空间上的对齐通俗的讲就是将一个传感器获取的数据统一到另一个 ...

  10. Python 基础面试第二弹

    1. 解释下Python中的面向对象,以及面向对象的三大特点: 在Python中,面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,它将数据和操作数据的 ...