Ajax實(shí)現(xiàn)搜索框提示功能

第Ajax實(shí)現(xiàn)搜索框提示功能title搜索框輸入文字自動(dòng)提示/title

linkrel="stylesheet"href="./assets/bootstrap/dist/css/bootstrap.min.css"rel="externalnofollow"/

styletype='text/css'

.list-group{

display:none;

.container{

padding-top:150px;

/style

/head

body

div

div

inputtype="text"placeholder="請輸入搜索的關(guān)鍵字"id="search"/

ulid="list-box"

!--li提示文顯示的地方/li--

/ul

/div

/div

scriptsrc="./js/ajax.js"/script

scriptsrc="./js/template-web.js"/script

scripttype="text/html"id="tpl"

{{eachresult}}

li{{$value}}/li

{{/each}}

/script

script

//獲取搜索框

varsearchInput=document.getElementById('search');

//獲取提示文字的存放問起

varlistBox=document.getElementById('list-box');

//存儲定時(shí)器的變量

vartimer=null;

//輸入框輸入觸發(fā)事件，并清除防抖/節(jié)流

searchInput.oninput=function(){

//清除上一次開啟的定時(shí)器

clearTimeout(timer);

//獲取用戶輸入的內(nèi)容

varkey=this.value;

//如果沒有在搜索框輸入內(nèi)容

if(key.trim().length==0){

//將提示下拉信息隱藏

listBox.style.display='none';

//阻止程式向下執(zhí)行

return;

//開啟定時(shí)器，讓請求延遲發(fā)送

timer=setTimeout(

function(){

//向服務(wù)器發(fā)送請求

ajax({

type:'get',

url:'http://localhost:3000/searchAutoPrompt',

data:{

key:key

success:function(result){

console.log(result);

//使用模板引擎拼接字符串

varhtml=template('tpl',{result:result});//獲取的result為數(shù)組

//拼接好的字符串顯示在頁面

listBox.innerHTML=html;

console.log(html);

//顯示ul容器

listBox.style.display='block';

},800);

/script

/body

/html

Ajax封裝方法：

functionajax(options){

//定義默認(rèn)

vardefaults={

type:'get',

url:'',

data:{},

Headers:{'Content-Type':'application/x-www-form-urlencoded'},

success:function(){},

error:function(){}

//用options中的對象覆蓋defaults中對象

Object.assign(defaults,options);

//創(chuàng)建

varxhr=newXMLHttpRequest();

//拼接請求參數(shù)變量

varparams='';

//循環(huán)用戶傳遞進(jìn)來的對象格式參數(shù)

for(varattrindefaults.data){

//將參數(shù)轉(zhuǎn)換成字符串格式

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'){

//用戶期望的向服務(wù)端傳遞的請求參數(shù)類型

varcontentType=defaults.Headers['Content-Type'];

//post請求時(shí)必須設(shè)置的

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事件,當(dāng)接收完響應(yīng)數(shù)據(jù)后觸發(fā)

xhr.onload=function(){

//xhr.getResponseHeader()

//獲取響應(yīng)頭部數(shù)據(jù)

varcontentType=xhr.getResponseHeader('Content-Type');

//服務(wù)端返回的數(shù)據(jù)

varresponseText=xhr.responseText;

if(contentType.includes('application/json')){

//把JSON字符串轉(zhuǎn)換為JSON對象

responseText=JSON.parse(responseText);

//對http狀態(tài)碼判斷，判斷是否等于200

if(xhr.status==200){

//調(diào)用處理成功情況的函數(shù)

defaults.success(responseText,xhr);

}else{

//調(diào)用處理失敗的情況函數(shù)

defaults.error(responseText,xhr);

}

服務(wù)器端測試代碼：

/****server.js****/

//一個(gè)簡單的后端路由

//1.引入express框架

constexpress=require('express');

constfs=require('fs');

//2.引入路徑處理模塊

constpath=require('path');

constbodyParser=require('body-parser');//post

//3.創(chuàng)建web服務(wù)器

constapp=express();

//post

//extended:返回的對象是一個(gè)鍵值對，當(dāng)extended為false的時(shí)候，鍵值對中的值就為'String'或'Array'形式，為true的時(shí)候，則可為任何數(shù)據(jù)類