[Ajax] jQuery中的Ajax -- 03-搜索框提示效果

最新推荐文章于 2025-04-08 17:38:18 发布
原创 最新推荐文章于 2025-04-08 17:38:18 发布 · 230 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #jQuery

本文探讨了百度搜索框提示效果的实现原理，通过异步交互技术，在用户输入时动态展示搜索建议。文章详细介绍了从页面刷新清空列表，到获取用户输入并请求JSON数据，再到解析数据并动态更新UI的过程。

案例 搜索框提示效果

平常说异步交互的时候,大多数想到的是三级联动,但是根据百度搜索框的样式发现,搜索框提示也是异步交互

代码下载地址

GIF 2020 9 5 14 44 25

从效果中可以看出

  1. 在不输入内容的情况下不显示
  2. 输入有内容显示内容
  3. 输入没有内容不显示内容

所以,根据思路可以确定

  • 在刷新页面时清空列表内容
  • 获取到每一次用户在输入到输入框的内容
  • 根据获取到的内容利用方法getJSON获取到json库的数据
    • 在获取json数据的时候获取到其中的name值
    • 判断用户输入到输入框的内容以及获取到的数据在json数据中是否存在
    • 存在就将json的数据返回添加带HTML页面中显示
    • 不存在则不显示所有内容
  • 在输入信息到获取信息到显示信息的时候,要保证提示框要从隐藏状态到显示状态
jquery-ui autocomplete 结合ajax实现自动完成搜索框匹配·
Pinky_wk的博客
03-29 3846
autocomplete结合ajax实现自动完成搜索框匹配 插件版本：jquery-ui-1.9.2.custom(密码：ecxq) 或者去jQuery UI 网站上的Download Builder（下载生成器）页面下载 jQuery UI 的副本。 前言:之前从未接触过autocomplete,之后想网上学习别人写的，也许插件版本不同网上各种写法都有，眼...
layui ajax-search,使用jquery+layui 做一个输入搜索下拉 类似lay-search
weixin_32612347的博客
08-06 873
效 果:因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西。一开始使用lay-search 的控件去弄。 但是无法控制里面的内容。所以用了一些笨方法去弄废话不说了，html部分：css部分：.border-left-st{border-left:1px solid red;}.border-top-st{border-top:1px solid red;}.border-bot...
ajax实现搜索提示,jquery+ajax 实现搜索框提示
weixin_31608241的博客
08-05 308
Document#search_result{width:302px;position:absolute;left:618px;top:180px;z-index:1;overflow:hidden;background:#dcf6f8;border:#c5dadb 1px solid;border-top:none;}.line{font-size:12px;color:#000;backgro...
jQuery中的Ajax----搜索框提示效果 【案例】
IT_qslong的博客
09-07 1008
案例 搜索框提示效果 搜索框是一个使用异步交互来实现的 异步交互：只要页面有局部数据在更新变化，但是整体页面没有变化的时候他一定是异步方法实现的 先来展示一下最后的效果 很明显，当你输入关键词的时候，他会在json文件里进行筛选然后展示出相同的关键字 下面就让我们具体来分析一下这个案例 首先我们得建一个json文件 ，来保存我们的数据。以便我们查找或者做操作，里面的内容我们采用属性和值的方法进行存储 具体如下： [ { "name":"javascript", "val
ajax实现消息提示框,jquery消息提示框
weixin_31869579的博客
08-05 803
用于ajax类型提示的，只显示一个。只是给个思路而已，代码有很多不足。4个参数，有2个是可选调用$.mTip('类型','显示内容',显示时间,回调函数)类型：0 为加载1 为成功2 为失败3 为警告显示时间：为整数型大于0，小于0或非整数一直存在，不消失！效果图：渣渣效果一份：提示框.msgbox_layer, .msgbox_layer .gtl_ico_succ, .msgbox_layer...
jQuery Ajax实现简单的搜索框提示功能
YLXB2的博客
11-25 7281
html： css代码： body{ background-color: #660099; } form{ float: left; background-color: #fff; position: relative; left: 10px; top: 10px; } .search_input
springMVC--Ajax详解
最新发布
m0_73856804的博客
04-08 1191
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。这个和Ajax的请求很像，但不是，他还是在页面中去请求网站，并不是异步请求，局部刷新。jQuery 提供多个与 AJAX 有关的方法。
使用Ajax模仿百度搜索框的自动提示功能实例例子解析
IT老农民的博客
12-14 1041
在Web开发中，Ajax是一种在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。通过这种方式，我们可以确保用户在登录后能够被重定向到他们最初请求的页面，从而提供更好的用户体验。首先，我们需要创建一个HTML页面，包含一个输入框用于输入搜索词，并用于显示搜索建议的下拉列表。接下来，我们需要创建一个服务器端接口，用于处理来自客户端的请求，并返回匹配的搜索建议。事件，当用户输入时，通过Ajax向服务器发送请求，并获取匹配的搜索建议。方法中处理跳转逻辑。来拼接返回的数据，并显示在页面上。
bjui ajax.js,B-JUI 前端管理框架
weixin_35476730的博客
08-06 1081
bjuiajaxbjuiajax是B-JUI封装的一系列ajax异步请求。B-JUI消息JSON当ajax请求时，服务端可以仅返回一个消息JSON告知前端框架处理的结果，这个JSON的格式如下：{"statusCode" : 200,"message" : "处理成功！"}消息JSON的参数JSON的keystatusCode、message可以在框架初始化时通过参数keys更改，statusCo...
jquery-select-auto-complete-codes.rar_Jquery的搜索框提示
09-21
在自动完成功能中，Ajax通常用于从服务器端获取匹配用户输入的数据，并在搜索框下方动态显示这些提示。因此，这个JQuery插件可能是通过Ajax调用后台接口，获取实时的搜索建议。 在提供的压缩包文件中，我们可以看到...
Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记
01-17
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中，提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
jQuery利用Ajax搜索框补全代码
06-24
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现一个功能丰富的搜索框补全功能。这个功能在许多网站上都很常见，它提高了用户输入的效率，为用户提供了一个友好的交互体验。 首先，jQuery是一个轻量级的...
jquery.ui.autocomplete-Ajax
08-04
这个组件尤其适用于搜索框、表单输入和其他需要动态获取数据的场景。在本篇中，我们将深入探讨jQuery UI Autocomplete与AJAX的结合使用，以及如何利用它们来实现动态数据加载。 首先，我们需要了解jQuery UI ...
jQuery-searchableSelect带搜索功能的下拉选
11-30
jQuery-searchableSelect插件正是为了解决这个问题，它提供了强大的可搜索的下拉选择框，增强了用户体验，同时也简化了开发者的工作。 一、jQuery-searchableSelect 插件简介 jQuery-searchableSelect是基于jQuery...
[Ajax] 案例 -- 三级联动
DeathDomain的博客
09-03 4640
案例 – 三级联动 什么是三级联动呢? 三个级别，联动代表这三个级别相互依赖与嵌套，唯有这样才能实现三级联动. 三级联动简单理解可以理解为两个二级联动, 只有点击省才能出现下一级的市 只有点击市才能出现下一级的区     在正式写之前,要先了解一下json,可以观看原来的内容 首先要创建三级联动(或者二级联动),那必不可少的就是数据库了,写的比较随意,主要测试效果 [ { "province": "吉林省", "cities": [
[Ajax] JSON数据格式
DeathDomain的博客
08-25 1699
JSON是什么 JSON是什么 JSON中文官网地址 是一种轻量级的数据交换格式 JSON是独立于任何语言的文本格式。易于程序员阅读和编写，同时也易于计算机解析和生成。   JSON语法规则 “名称/值”对的集合（Acollection of name/value pairs）。不同的语言中，它被理解为对象(object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table ),有键列表（keyed list），或者关联数组（associat
[Ajax] Ajax的基本用法
DeathDomain的博客
08-20 529
同步交互与异步交互   同步交互是什么 所谓同步交互，就是指发送一个请求，需要等待返回，然后才能够发送下一个请求。 同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。 第二次请求必须等待第一次请求结束之后才可以开始。   异步交互是什么 所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。 同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。 第二次请求不需要等待第一 次请求结束之后就可以开始。   异步交互
[Ajax] 实现跨域访问
DeathDomain的博客
09-06 525
跨域访问是什么 同源策略 所谓“同源”指的是“三个相同”:协议相同、域名相同以及端口相同。 Cookie、LocalStorage和lndexDB无法读取 DOM无法获得 AJAX请求不能发送 同源 不同源 网络协议 相同 相同 域名 相同 相同/不相同 端口号 相同 不相同   域名是什么 域名(Doain Name）又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置
AJAX -- 目录
DeathDomain的博客
08-20 506
[Ajax] Ajax的基本用法
使用jQuery打造Ajax搜索框提示小插件jSuggest
标签“jquery实现ajax搜索框”则进一步细化了这个插件的技术范畴，即使用jQuery（一个JavaScript库）来帮助开发者更方便地操作DOM和处理AJAX请求，从而实现搜索框的动态下拉提示效果。 从文件名称列表来看，并没有...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值