0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

jQuery中使用Ajax实现文本输入框的自动完成功能

当我们使用搜索引擎时发现会有自动提示的功能,那么,它是怎么实现的呢?在jQuery中结合Ajax可以很容易实现自动完成的功能。

下面就在jQuery中使用Ajax提交post请求,让服务器端返回自动完成的数据显示在相应的div中。

编写html文件

主要是一个输入框,一个隐藏的div和提交按钮:

输入关键词:

编写CSS样式

为了让显示效果更好看,编写如下CSS样式:

jQuery代码

服务器端的响应程序

为了简单的验证可以编写以下php代码:

echo '

  • arthinking
  • ';
    echo '
  • ajax
  • ';
    echo '
  • autoComplete
  • ';
    echo '
  • abc
  • ';

    也可以让服务器程序查询数据库,从相应的数据库中选择匹配的数据返回给客户端:

    $keywords = $_POST['keywords'];
    $conn = mysql_connect("localhost", "root", "123") or die ("Please check your server connection.");
    mysql_select_db("autocomplete");
    $query = "select keywords from index_list where keywords like '$keywords'";
    $results = mysql_query($query) or die(mysql_error());
    if($results) {
    //从结果集中取得一行作为关联数组
    while ($row = mysql_fetch_array($results)) {
    //extract() 函数从数组中把变量导入到当前的符号表中
    extract($row);
    echo '

  • ' . $keywords. '
  • ';
    }
    }

    欢迎关注我的其它发布渠道

    订阅IT宅
    内功修炼
    Java技术栈
    Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
    📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
    📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
    📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
    📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法