<!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;
        //輸入框輸入觸發(fā)事件，并清除防抖/節(jié)流
        searchInput.oninput=function(){
            //清除上一次開啟的定時器
            clearTimeout(timer);
            //獲取用戶輸入的內容
            var key= this.value;
            //如果沒有在搜索框輸入內容
            if(key.trim().length==0){
                //將提示下拉信息隱藏
                listBox.style.display='none';
                //阻止程式向下執(zhí)行
                return;
            }

            //開啟定時器，讓請求延遲發(fā)送
            timer = setTimeout(
                function(){
             //向服務器發(fā)送請求
           ajax({
               type:'get',
               url:'http://localhost:3000/searchAutoPrompt',
               data:{
                   key: key
               },
               success:function(result){
                console.log(result);
                   //使用模板引擎拼接字符串
                  var html= template('tpl',{result:result});//獲取的result為數(shù)組
                  //拼接好的字符串顯示在頁面
                  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);
    //創(chuàng)建
    var xhr= new XMLHttpRequest();
    //拼接請求參數(shù)變量
    var params='';
    //循環(huán)用戶傳遞進來的對象格式參數(shù)
    for(var attr in defaults.data){
        //將參數(shù)轉換成字符串格式
        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);
    //發(fā)送請求
    if(defaults.type=='post'){
        //用戶期望的向服務端傳遞的請求參數(shù)類型
        var contentType=defaults.Headers['Content-Type'];
        //post請求時必須設置的
        xhr.setRequestHeader('Content-Type',contentType);
        //判斷請求參數(shù)類型
        if(contentType=='application/json'){
            xhr.send(JSON.stringify(defaults.data));
        }else{
            xhr.send(JSON.stringify(params));
        }
        
    }else{                
        xhr.send();
    }

    //監(jiān)聽onload事件,當接收完響應數(shù)據(jù)后觸發(fā)
    xhr.onload=function(){
    //xhr.getResponseHeader()
    //獲取響應頭部數(shù)據(jù)
    var contentType=xhr.getResponseHeader('Content-Type');
    //服務端返回的數(shù)據(jù)
    var responseText=xhr.responseText;
    if(contentType.includes('application/json')){
        //把JSON字符串轉換為JSON 對象
        responseText = JSON.parse(responseText);
    }

    //對http狀態(tài)碼判斷，判斷是否等于200
    if(xhr.status==200){
        //調用處理成功情況的函數(shù)
        defaults.success(responseText,xhr);
    }else{
        //調用處理失敗的情況函數(shù)
        defaults.error(responseText,xhr);
    }       
    
    }
}

服務器端測試代碼：

/**** server.js ****/
// 一個簡單的后端路由

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

const fs=require('fs');

//2.引入路徑處理模塊
const path=require('path');
const bodyParser=require('body-parser');//post

//3.創(chuàng)建web服務器
const app=express();

//post
//extended:返回的對象是一個鍵值對，當extended為false的時候，鍵值對中的值就為'String'或'Array'形式，為true的時候，則可為任何數(shù)據(jù)類型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());

//4.靜態(tài)資源訪問服務器功能
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=['合肥蜀山區(qū)','合肥瑤海區(qū)','合肥肥西','合肥肥東','合肥新站區(qū)'];
		response.send(result)
	} else if(key == "阜陽") {
        result=['阜陽市阜南縣','阜陽卷膜','阜陽火車站','阜陽格拉條'];
		response.send(result)
	}else {
        response.send(result)
    }  
});

//6.監(jiān)聽端口,進行回調
app.listen(3000,(err)=>{
    // 函數(shù)體
    if(!err) {
        console.log('測試ajax請求的服務器開啟成功了!');
        console.log('正在監(jiān)聽3000端口...........');
    }
});

到此這篇關于Ajax實現(xiàn)搜索框提示功能的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: