Ajax实现关键字联想和自动补全功能及遇到坑

2024-11-27 01:53:34

遇到的小坑

回调函数相对window.onload的摆放位置
给回调函数addData传数据时，如何操作才能将数据传进去

代码实现

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax实现关键字联想和自动补全</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #keyWords{
            margin-top: 10px;
            margin-left: 10px;
            width: 300px;
            height: 25px;
            font-size: 20px;
            padding-left: 5px;
        }
        #dataDiv{
            background-color: wheat;
            width: 300px;
            margin-left: 10px;
            display: none;
        }
        #dataDiv p{
            padding-left: 10px;
            padding-top: 7px;
            padding-bottom: 3px;
            cursor: pointer;
        }
        #dataDiv p:hover{
            background-color: cornflowerblue;
            color: white;
        }
    </style>
</head>
<body>
    <!--
        需求:
            1. 给定文本输入框，显示层，显示层里的显示栏
            2. 当用户在文本框里输入数据时，发生keyup事件时，将文本框里的数据，以ajax请求方式提交的到后端
            3. 后端对前端提交的关键字，在数据库里进行模糊查询
            4. 将后端查询到的数据以json格式传给前端
            5. 前端解析后端传来的数据，将数据显示在提示栏里
            6. 当用户点击提示中的某条提示信息时，将提示栏里的信息赋给输入框，隐藏提示层
            注意：1. 凡是输入框里发生keyup事件时，都要进行ajax请求提交，实时获取提示信息
                 2. 输入框信息为空时，也要隐藏提示层
    -->
    <script>
        window.onload = function (){
            //获取dom对象
            input_txt = document.getElementById("keyWords")
            div_data = document.getElementById("dataDiv")
            //为输入框绑定keyup事件
            input_txt.onkeyup = function (){
                //输入框为空，隐藏提示层
                if(this.value.trim() == ""){
                    div_data.style.display = "none"
                }else{
                    //每当keyup时，发送ajax请求，传递文本框内数据
                    var xmlHttpRequest = new XMLHttpRequest();
                    xmlHttpRequest.onreadystatechange = function (){
                        if(this.readyState == 4){
                            if(this.status == 200){
                                //解析后端传来的json数据:[{"content" : "data"}, {}, {}]
                                var jsonArray = JSON.parse(this.responseText)
                                var html = ""
                                for(var i = 0; i < jsonArray.length; i++){
                                    var perData = jsonArray[i].content
                                    //为p标签绑定单击事件,将数据以字符串的形式传给回调函数
                                    html += "<p onclick='addData(\""+perData+"\")'>"+perData+"</p>"
                                }
                                div_data.innerHTML = html
                                div_data.style.display = "block"
                            }else{
                                alert("异常状态码: " + this.status)
                            }
                        }
                    }
                    xmlHttpRequest.open("GET", "/ajax/ajaxAutoComplete?keyWords="+this.value+"", true)
                    xmlHttpRequest.send()
                }
            }
        }
        function addData(perData){
            //完成自动补全
            input_txt.value= perData
            //隐藏提示层
            div_data.style.display = "none"
        }
    </script>
    <input type="text" id="keyWords">
    <div id="dataDiv">
        <!--
        <p>java</p>
        <p>jsp</p>
        <p>service</p>
        <p>servlet</p>
        <p>docker</p>
        <p>linux</p>
        -->
    </div>
</body>
</html>

后端代码

package com.examples.ajax.servlet;
import com.alibaba.fastjson.JSON;
import com.examples.ajax.beans.KeyWords;
import com.examples.ajax.utils.DBUtils;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/ajaxAutoComplete")
public class AjaxRequest13 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //获取前端传来的关键字
        String keyWords = request.getParameter("keyWords");
        //连接数据库，进行模糊查询
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        //封装关键字对象
        List<KeyWords> keyWordsList = new ArrayList<>();
        try {
            conn = DBUtils.getConnection();
            String sql = "select content from tb_search where content like ?";
            ps = conn.prepareStatement(sql);
            ps.setString(1, keyWords + "%");
            rs = ps.executeQuery();
            while(rs.next()){
                String content = rs.getString("content");
                //封装成关键字对象
                KeyWords keyWordsObj = new KeyWords(content);
                //将关键字对象封装
                keyWordsList.add(keyWordsObj);
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }finally {
            DBUtils.close(conn, ps, rs);
        }
        //后端数据json化
        String jsonKeyWordsArray = JSON.toJSONString(keyWordsList);
        //返回后端数据
        response.getWriter().write(jsonKeyWordsArray);
    }
}

用到的实体类

package com.examples.ajax.beans;
public class KeyWords {
    private String content;
    public KeyWords() {
    }
    public KeyWords(String content) {
        this.content = content;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
}

自己封装的jdbc工具类

package com.examples.ajax.utils;
import java.sql.*;
import java.util.ResourceBundle;
/**
 * 封装自己的jdbc工具类
 */
public class DBUtils {
    static ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
    static String driver;
    static String url;
    static  String username;
    static  String password;
    static {
        driver = bundle.getString("driver");
        url = bundle.getString("url");
        username = bundle.getString("username");
        password = bundle.getString("password");
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            throw new RuntimeException(e);
        }
    }
    private DBUtils(){}
    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(url, username, password);
    }
    public static void close(Connection conn, PreparedStatement ps, ResultSet rs){
        if(rs != null){
            try {
                rs.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
        if(ps != null){
            try {
                ps.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
        if(conn != null){
            try {
                conn.close();
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }
}

数据库表:

一张表: tb_search
数据表描述: 除了id, 就一个字段 content varchar(255) not null

效果展示:

自己在远程数据库上用docker运行了一个mysql数据库，查询速度比较慢，但演示关键字联想和自动补全功能的测试目的已经达到

到此这篇关于Ajax实现关键字联想和自动补全功能的文章就介绍到这了,更多相关ajax关键字自动补全内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

jq.ajax+php+mysql实现关键字模糊查询(示例讲解)

对于这个功能企业上还算比较实用,推荐给大家: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> *{margin:0;padding:0;} .text{width:200px;height:30px;line-height:30px;font-size:14px;outline:none;} ul{wid
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别

前言第一次听说jsonp,其实早在2年之前.当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成jsonp.于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式...直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难. 为什么要用jsonp? 相信大家对跨域一定不陌生,
Ajax实现模拟关键字智能匹配搜索效果

准备数据keyword.json:(这里只贴出部分数据) [ {"id":1,"initial":"ad","keyword":"奥迪"}, {"id":2,"initial":"ada4l","keyword":"奥迪A4L"}, {"id":3,"initial":
JS this关键字在ajax中使用出现问题解决方案

背景: 在一次web网站开发维护中,使用手机验证码进行登录.再点击获取手机验证码时,验证码按钮并没有置灰,同时也没有出现倒数读秒的效果. 设置按钮倒数60秒前端代码: var clock = ''; var nums = 60; var btn; function sendCode(thisBtn) { btn = thisBtn; btn.disabled = true; //将按钮置为不可点击 btn.value = nums + '秒重新获取'; btn.className = 'regG
Ajax实现关键字联想和自动补全功能及遇到坑

目录遇到的小坑代码实现前端代码后端代码用到的实体类自己封装的jdbc工具类数据库表: 效果展示: 遇到的小坑回调函数相对window.onload的摆放位置给回调函数addData传数据时,如何操作才能将数据传进去代码实现前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax实现关键
asp.net+ajax+sqlserver自动补全功能实现解析

代码下载说明:数据库连接字符串在web.config文件中,为方便运行使用的是官方的Northwind数据库. 参考(向其作者致敬): ² http://www.loveweb8.com/plus/demo.php?aid=57这个例子是html源码.利用jquery.autocomplete插件利用js实现了自动补全功能.由于我的需要是结合sqlserver数据库表实现自动补全功能.就下来就是将数据库表转为js数组,自然而然就想到了ajax. ² Asp.NetAjax的两种基本开发模式这篇
JSP + ajax实现输入框自动补全功能实例代码

下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();
Ajax实现搜索引擎自动补全功能

每当我们遇到一些问题时候,我们会百度一下,你是有过我们的问题还没打完就已经出现的经历? 如下图: 天猫: 京东: 这时候的你是否想到如何实现这个功能? 我们的网页明明没有刷新,可是却出现了数据的交互,也就是Ajax的强大之处. 下面以一个例子来实现. 搜索框和搜索按钮,我们希望在搜索框输入部分书名时,能够实现书名的自动补全功能.每当点击了相应的书名,就把内容输入到搜索框. 对应的代码 Search <input type="text" name="name"
Bootstrap3使用typeahead插件实现自动补全功能

很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全相关的文档:https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源: Local:数组 prefectch:json remote等方式 -----------------------------------------------
基于jquery实现的自动补全功能

本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: $(function() { // 自动补全 var maxcount = 0;// 表示他最大的值 var thisCount =0;// 初始化他框的位置 $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos
eclipse自动提示和自动补全功能实现方法

解决代码的自动提示问题: 1.打开 Eclipse -> Window -> Perferences 2.找到Java 下的 Editor 下的 Content Assist , 右边出现的选项中,有一个Auto activation triggers for Java: 会看到只有一个"."存在.表示:只有输入"."之后才会有代码提示 3.先把上图中"."的地方输入几个随便的字符,例如"dsfd",点最下面的&q
easyui-combobox 实现简单的自动补全功能示例

前台: Html页面 <input id="clsydw" name="clsydw" class="easyui-combobox" data-options="" /> JS //自动补全功能 $("#clsydw").combobox({ valueField:'syr', textField:'syr', panelWidth:200, panelHeight:'auto', onCh
jQuery实现邮箱下拉列表自动补全功能

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填写邮箱名字,出现下拉列表,自动补全邮箱 •点击上下按键,选取下拉列表邮箱 •按回车键,选中列表内容,隐藏下拉列表 •鼠标经过,下拉列表选项设置为高亮 •鼠标点击,选中下拉列表选项,隐藏下拉列表 HTML HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签. <ht
jQuery实现Email邮箱地址自动补全功能代码

本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js