Ajax实现搜索框提示功能

2024-04-02 19:04:59 281人浏览泡泡鱼

摘要

html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet"  href="./assets/bootstrap/dist/CSS/bootstrap.min.css" rel="external nofollow" />
    <style type='text/css'>
        .list-group{
            display: none;
        }
        .container{
            padding-top: 150px;
        }
     </style>
</head>
<body>
    <div class='container'> 
        <div class="fORM-group">
            <input type="text" class="form-control" placeholder="请输入搜索的关键字" id="search"/>
            <ul class="list-group"  id="list-box">
                <!-- <li class="list-group-item">提示文显示的地方</li> -->
            </ul>
        </div>
    </div>
    <script src="./js/ajax.js"> </script>
    <script src="./js/template-WEB.js"></script>
    <script type="text/html" id="tpl">
        {{ each result }}
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>
    <script>
        //获取搜索框
        var searchInput=document.getElementById('search');
        //获取提示文字的存放问起
        var listBox=document.getElementById('list-box');
        //存储定时器的变量
        var timer =null;
        //输入框输入触发事件，并清除防抖/节流
        searchInput.oninput=function(){
            //清除上一次开启的定时器
            clearTimeout(timer);
            //获取用户输入的内容
            var key= this.value;
            //如果没有在搜索框输入内容
            if(key.trim().length==0){
                //将提示下拉信息隐藏
                listBox.style.display='none';
                //阻止程式向下执行
                return;
            }

            //开启定时器，让请求延迟发送
            timer = setTimeout(
                function(){
             //向服务器发送请求
           ajax({
               type:'get',
               url:'Http://localhost:3000/searchAutoPrompt',
               data:{
                   key: key
               },
               success:function(result){
                console.log(result);
                   //使用模板引擎拼接字符串
                  var html= template('tpl',{result:result});//获取的result为数组
                  //拼接好的字符串显示在页面
                  listBox.innerHTML=html;
                  console.log(html);
                  //显示ul容器
                  listBox.style.display='block';
               }
           });
             },800 );
        }
    </script>
</body>

</html>

Ajax封装方法：

function ajax(options){
           
    //定义默认
    var defaults ={
        type:'get',
        url:'',
        data:{},
        Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
        success:function(){},
        error:function(){}
    };
    //用options中的对象覆盖defaults中对象
    Object.assign(defaults,options);
    //创建
    var xhr= new XMLHttpRequest();
    //拼接请求参数变量
    var params='';
    //循环用户传递进来的对象格式参数
    for(var attr in defaults.data){
        //将参数转换成字符串格式
        params+= attr +'='+ defaults.data[attr] +'&';
    }
    //字符串截取，将最后的&截取掉
    params= params.substr(0,params.length -1);

    //判断请求方式
    if(defaults.type=='get'){
        defaults.url=defaults.url +'?'+ params;
    }

    //配置
    xhr.open(defaults.type,defaults.url);
    //发送请求
    if(defaults.type=='post'){
        //用户期望的向服务端传递的请求参数类型
        var contentType=defaults.Headers['Content-Type'];
        //post请求时必须设置的
        xhr.setRequestHeader('Content-Type',contentType);
        //判断请求参数类型
        if(contentType=='application/JSON'){
            xhr.send(JSON.stringify(defaults.data));
        }else{
            xhr.send(JSON.stringify(params));
        }
        
    }else{                
        xhr.send();
    }

    //监听onload事件,当接收完响应数据后触发
    xhr.onload=function(){
    //xhr.getResponseHeader()
    //获取响应头部数据
    var contentType=xhr.getResponseHeader('Content-Type');
    //服务端返回的数据
    var responseText=xhr.responseText;
    if(contentType.includes('application/json')){
        //把JSON字符串转换为JSON 对象
        responseText = JSON.parse(responseText);
    }

    //对http状态码判断，判断是否等于200
    if(xhr.status==200){
        //调用处理成功情况的函数
        defaults.success(responseText,xhr);
    }else{
        //调用处理失败的情况函数
        defaults.error(responseText,xhr);
    }       
    
    }
}

服务器端测试代码：


// 一个简单的后端路由

//1.引入express框架
const express=require('express');

const fs=require('fs');

//2.引入路径处理模块
const path=require('path');
const bodyParser=require('body-parser');//post

//3.创建web服务器
const app=express();

//post
//extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());

//4.静态资源访问服务器功能
app.use(express.static(path.join(__dirname,'public')));


//5.配置路由 request 请求   response 响应,回应
//get路由 ，对应12.html
app.get('/searchAutoPrompt',(request,response)=>{
    //响应
    const key = request.query.key;
    var result=["无匹配内容"];
	if (key == "合肥") {
        result=['合肥蜀山区','合肥瑶海区','合肥肥西','合肥肥东','合肥新站区'];
		response.send(result)
	} else if(key == "阜阳") {
        result=['阜阳市阜南县','阜阳卷膜','阜阳火车站','阜阳格拉条'];
		response.send(result)
	}else {
        response.send(result)
    }  
});

//6.监听端口,进行回调
app.listen(3000,(err)=>{
    // 函数体
    if(!err) {
        console.log('测试ajax请求的服务器开启成功了!');
        console.log('正在监听3000端口...........');
    }
});

到此这篇关于Ajax实现搜索框提示功能的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Ajax实现搜索框提示功能

本文链接: https://www.lsjlt.com/news/147361.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341