js实现百度搜索框功能

2024-08-02

js中实现输入框类似百度搜索的智能提示效果

说明:我这里显示的数据采用词典(词典在js中自定义的,看下面文字),主要显示key. 页面元素: <style type="text/css">.search { left: 0; position: relative; } #auto_div { display: none; width: 92%; min-height:50px; max-height:200px; overflow-y:auto; border: 1px #74c0f9 solid; backgrou

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

现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不精,没读懂百度的js,有点小bug. <!DOCTYPE html> <html> <head> <title>柳絮飞祭奠</title> <meta http-equiv="keywords" content="

JS 实现百度搜索功能

今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon&

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

使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0&quo

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

public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); JSONObject jo = new JSONObject(); jo.pu

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

如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jquery的keyup事件,以及ajax与服务端的交互. 废话少说直接上代码: 引用,需要jquery-ui和jquery: <link rel="stylesheet" href="/static/plugins/jqueryui1/jquery-ui-autocomplete

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

模拟百度搜索框我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i].indexOf(text) == 0 来判断,true就追加进临时数组tempArr.push(keyWords[i]) --->bug修复:每一次键盘抬起,都判断页面有没有div,有就删除 --->何时出现div:判断条件:当文本框为空,或临时数字空,不创建div,如果有div,就删除 ---&

用jsonp实现搜索框功能

用jsonp实现搜索框功能前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面的方法并不能获取到我想要的效果.无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面).今天想彻底把这个问题搞明白. 用jquery和ajax进行初步的尝试: (本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频.自己之前的代码找不到了,之前最先的想法也是

React实现最完整的百度搜索框

import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/dist/css/bootstrap.min.css' // import PropTypes from 'prop-types'; import JSONP from 'jsonp' //封装jonsp为promise对象 function jsonp(url,opts={}) { return ne

Ajax跨域：Jsonp实例--百度搜索框下拉提示

Ajax跨域:Jsonp实例--百度搜索框下拉提示一.总结一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网站的请求的接口? google浏览器->F12->Network 2.Jsonp是什么? Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 3.Jsonp和普通json返回的数据的区别是

window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

--------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系统中的某文件冲突了,然后就出现了让强迫症抓狂的一幕: 打开谷歌浏览器,使用百度搜索时一级网站没有问题,然而跳转到关键词搜索的二级网站后,不显示光标,输入框输入完全无效,不能选中输入框的文字. 排错阶段: 1.先检查是否是硬件设备问题(键盘.鼠标),答案当然是否 2.通过其他的搜索引擎,也就是看其他人

原生JS实现百度搜索功能

今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-ic

typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘宝等结果源. 下载地址:https://www.opensug.org/.../openSug_v1.0.0(2kb)

js借助JSONP实现百度搜索框提示效果

主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id="input"> <div id="text"></div> js: document.querySelector('#input').oninput = function () { let val = this.value; jsonp

【JavaScript_DOM 百度搜索框】

今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢? 我们一起来学习吧这是一个HTML页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" type="images/x-icon" href=&qu

js 获取百度搜索关键词的代码

有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function queryString(parm,parm2){ var url1 = parm2; //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. //如果要检索的字符串值没有出现,则该方法返回 -1. var begin = url1.indexOf("&"+parm+

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

做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github.com/agarzola/jQueryAutocompletePlugin 官方的英文文档:http://api.jqueryui.com/autocomplete/ 在使用过程中遇到大坑跟大家说一下. 第一个是插件的数据源问题! 如果要使用服务器的数据源需要在调用autocomplete的时候传

使用DWR实现自动补全类似百度搜索框的自动显示效果

使用DWR实现自动补全自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字训练要点: 掌握使用DWR框架开发Ajax程序使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

使用DWR实现自己主动补全相似百度搜索框的自己主动显示效果

使用DWR实现自己主动补全自己主动补全:是指用户在文本框中输入前几个字母或汉字的时候,自己主动在存放数据的文件或数据库中将全部以这些字母或汉字开头的数据提示给用户供用户选择在日常上网过程中,我们常常使用搜索引擎.当我们输入想要检索的keyword时.搜索引擎会提示我们相关的keyword 训练要点: 掌握使用DWR框架开发Ajax程序使用MyEclipse 10.0 + MySql5.0 新建数据库:能够手动随便新建一个測试用的 DROP TABLE IF EXISTS `books`;

使用Jquery UI 高仿百度搜索下拉列表功能

最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件目前我使用的实现版本是: 网友可以自行下载好js文件,css文件,放在你项目可以访问到位置就可以了. 引入这些文件之后,你就可以复制使用下面的页面来测试(注意引用文件的路径): <!doctype html><html lang="en"><head> <meta charset=

ajax实现异步前后台交互，模拟百度搜索框智能提示

1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结果告诉我填错了,怎么办?如果我一填错就提示我填错了,那该有多好啊,此时,异步提交就出现了,不用写好所有数据一次全部提交,而是可以部分提交数据. 2.ajax实现异步提交的核心代码就是一行,就是获取浏览器内嵌的XMLHttpRequest对象,用该对象发送请求xmlHttp.open("GET&quo

js实现百度搜索框功能

热门专题