jquery+ajax+text文本框智能提示

最新推荐文章于 2021-08-05 15:18:57 发布

wdfscp

最新推荐文章于 2021-08-05 15:18:57 发布

阅读量9.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据库开发 ASP.NET开发 JQUERY开发 CSS开发

本文链接：https://blog.youkuaiyun.com/wdfscp/article/details/8372994

这篇博客介绍了如何模仿百度查询的智能提示功能，通过结合jQuery和Ajax技术，实现在文本框输入时自动显示相关建议的效果。文章包含代码展示，主要涉及CSS和ASP.NET页面的HTML部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿百度查询的智能提示

先看看效果图：

代码部分:

CSS代码:

    <style type="text/css">
        #searchresult
        {
            width: 130px;
            position: absolute;
            z-index: 1;
            overflow: hidden;
            left: 130px;
            top: 71px;
            background: #E0E0E0;
            border-top: none;
        }
        .line
        {
            font-size: 12px;
            background: #E0E0E0;
            width: 130px;
            padding: 2px;
        }
        .hover
        {
            background: #007ab8;
            width: 130px;
            color: #fff;
        }
        .std
        {
            width: 150px;
        }
    </style>

html代码(本文采用的asp.net页面编写的):

<body>
    <form id="form1" runat="server">
    <div>
        智能模糊查询提示
        <input id="txt_search" type="text" style="width: 150px;" />
        <div id="searchresult" style="display: none;">
        </div>
    </div>
   
    </form>
</body>

jquery代码部分：

<script type="text/javascript">
        $(function () {
            $("#txt_sea

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wdfscp

关注关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JQuery+AJAX实现搜索文本框的输入提示功能

weixin_33907511的博客

11-04

532

平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母，下面马上会弹出一个相关信息的内容框可供选择。感觉这个功能有较好的用户体验，所以也想在自己的网站上加上这种输入提示框。实现的原理其实很简单，在输入页面利用JQuery获取用户输入，然后通过AJAX异步发送到处理页面，处理页面接收到值后进行模糊匹配查询，然后将结果返回，输入页收到返回的数据后在处理，并生成相应的页面显示在页面...

JQuery实现AJAX异步实现搜索框智能提示功能（百度搜索框智能提示）（传输格式为默认普通字符串格式）...

weixin_30467087的博客

08-22

257

心得：使用异步请求服务端响应的数据既可以是普通文本字符串亦可以是另外一个转发后的jsp页面（jsp页面处理后的数据响应给客户端），也可以是xml数据和json数据，根据不同的数据可以在客户端作出响应的接受。 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;...

5 条评论您还未登录，请先登录后发表或查看评论

jQuery中的Ajax----搜索框提示效果【案例】

IT_qslong的博客

09-07

983

案例 搜索框提示效果 搜索框是一个使用异步交互来实现的异步交互：只要页面有局部数据在更新变化，但是整体页面没有变化的时候他一定是异步方法实现的先来展示一下最后的效果很明显，当你输入关键词的时候，他会在json文件里进行筛选然后展示出相同的关键字下面就让我们具体来分析一下这个案例首先我们得建一个json文件，来保存我们的数据。以便我们查找或者做操作，里面的内容我们采用属性和值的方法进行存储具体如下： [ { "name":"javascript", "val

java ajax搜索提示_Servlet+Ajax实现搜索框智能提示代码

weixin_39622398的博客

02-23

145

#mydiv{position: absolute;left:50%;top:50%;margin-left: -200px;margin-top: -50ps;}.mouseOver{background: #708090;color:#FFFAFA;}.mouseOut{background: #FFFAFA;color:#000000;}var xmlHttp;//获取用户输入内容的关联信息...

jquery+ajax+text文本框实现智能提示完整实例

10-21

本实例详细讲解了如何使用jquery结合ajax技术和text文本框组件来实现智能提示的功能。在Web开发中，智能提示是一种常用的用户交互方式，它能够根据用户输入的内容，实时地从服务器获取匹配的数据，并以提示列表的...

jsp智能提示完整版，jquery+ajax+text实现

05-14

【标题】"jsp智能提示完整版，jquery+ajax+text实现"揭示了这是一个关于Web开发的项目，主要涉及的技术栈是JavaServer Pages (JSP)、jQuery、Ajax以及文本处理。这个项目意在模仿百度的智能提示功能，即在用户输入时...

html5+jQuery实现的点击text文本框个性化时间选择插件源码.zip

11-03

在这个“html5+jQuery实现的点击text文本框个性化时间选择插件源码.zip”压缩包中，包含了一个利用这两种技术构建的时间选择插件。这个插件允许用户在text输入框内点击时，弹出一个可定制的时间选择器，从而提供更加...

Ajax+Servlet实现智能搜索框

技术从心

05-11

1107

Ajax+Servlet实现智能搜索框 前端代码： pageEncoding="UTF-8"%> AjaxTest #mydiv{ position:absolute; left:50%; top:50%; margin-left: -250px; ma

ajax获取文本框中信息,ajax在文本框中显示查询结果

weixin_32838901的博客

08-05

730

好吧，所以我在我的GoDaddy托管帐户上安装了jQuery。我需要在文本框中显示结果，并完成了我的HTML，它获取用户输入，单击按钮和结果区域(div id = status)。我只想将结果放在一个框中，而不必刷新页面。我正在尝试这个json的事情和AJAX来完成这一点，我试图找出我的尝试有什么问题。这是HTML。ajax在文本框中显示查询结果TestMiles Submit$('getdat...

asp.net中利用ajax获取动态创建表中文本框的值

12-25

介绍asp.net中如何利用ajax获取动态建表中文本框的值

AJAX如何在TEXT中动态显示数据

08-12

如何在TEXT中动态如何在TEXT中动态如何在TEXT中动态显示数据

Ajax进阶篇(三)——使用jQuery实现异步校验用户名与仿百度搜索提示

李阿昀的博客

07-08

572

使用jQuery实现异步校验用户名在这篇《Ajax进阶篇(一)——异步校验用户名》文章中，我们就已经实现了异步校验用户名这个需求，只不过是没有使用jQuery而已，现在我们使用jQuery的方式来实现同样的需求。这里，只需要修改用户注册页面即可，改用jQuery的方式发送post请求。所以，register.jsp页面的内容应改为： <%@ page language="java" co...

jquery 验证框架的问题 remote的

02-15

168

1、dataType类型：String预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:"xml": 返回 XM...

jquery实现搜索框类似提示功能(改进)

weixin_34041003的博客

05-23

140

用JQuery实现的类似GOOGLE\BAIDU搜索框的提示功能. 程序在一个页面只能创建一个提示搜索框,因为对js也不熟,所以还不知道怎么解决... 继续改进版,支持多个输入框!初步测试没发现问题,欢迎大家一起测试改进!!! autopoint.js代码: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * D...

weixin_39993623的博客

08-05

792

我有一个按钮，当我点击它时，它会从我的数据库中获取数据，并根据ID将其显示在我的文本区域中。如何从jQuery onclick函数的Ajax函数中获取值？JQuery的$('#verifyBtn').on("click", function() {var exeOutput = checkOutput();$("outputArea").html(exeOutput);});function ch...

AJAX（JavaScript、JQuery）、使用AJAX完成用户名的异步请求校验、使用JQ完成用户名异步校验、使用JQ完成仿百毒搜索提示的效果

Kfie66的博客

10-12

741

案例一：使用AJAX完成用户名的异步校验一，需求分析我们有一个网站，网站中都有注册的页面，当我们在注册的页面中输入用户名的时候，这个时候会提示，用户名是否存在。二，技术分析 1. AJAX的概述 1.1 什么是AJAX Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页...

2020 使用jquery形式的Ajax+servlet实现简单用户名自动提示功能(可自加后台dao查找数据库)

夜林的博客

11-11

314

使用jquery形式的Ajax+servlet实现简单用户名自动提示功能(可自加后台dao查找数据库) 演示： AjaxServlet.java package servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletReq

ajax接收text文本框的值,如何使用Ajax或Jquery填充文本框中的值？

weixin_33473486的博客

08-05

353

Example- Consider three textboxes. In the first one, im providing ID or number ( primary key in my table). Using the ID, the semester and branch should be auto filled using the ID. ( All the three fie...