搜索框内容自动提示bootstrap ajax
生活随笔
收集整理的這篇文章主要介紹了
搜索框内容自动提示bootstrap ajax
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>搜索框輸入文字自動(dòng)提示</title><link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"><style type="text/css">.container {padding-top: 150px;}.list-group {display: none;}</style>
</head><body><div class="container"><div class="form-group"><input type="text" class="form-control" placeholder="請(qǐng)輸入搜索關(guān)鍵字" id="search"><ul class="list-group" id="list-box"></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 searchInp = document.querySelector('#search')// 獲取提示文字的存放容器var listBox = document.querySelector('#list-box')// 存儲(chǔ)定時(shí)器的變量var timer = null;// 當(dāng)用戶在文本框中輸入的時(shí)候觸發(fā)searchInp.oninput = function() {// 清除上一次開啟的定時(shí)器clearTimeout(timer);// 獲取用戶輸入的內(nèi)容var key = this.value;// 如果用戶沒有在搜索框中輸入內(nèi)容if (key.trim().length == 0) {// 將提示下拉框隱藏掉listBox.style.display = 'none';// 阻止程序向下執(zhí)行return;}// 開啟定時(shí)器 讓請(qǐng)求延遲發(fā)送timer = setTimeout(function() {// 向服務(wù)器端發(fā)送請(qǐng)求// 向服務(wù)器端索取和用戶輸入關(guān)鍵字相關(guān)的內(nèi)容ajax({type: 'get',url: 'http://localhost:3000/searchAutoPrompt',data: {key: key},success: function(result) {// 使用模板引擎拼接字符串var html = template('tpl', {result: result});// 將拼接好的字符串顯示在頁面中listBox.innerHTML = html;// 顯示ul容器listBox.style.display = 'block';}})}, 800)}</script>
</body></html>
ajax.js
function ajax (options) {// 默認(rèn)值var defaults = {type: 'get',url: '',async: true,data: {},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: function () {},error: function () {}}// 使用用戶傳遞的參數(shù)替換默認(rèn)值參數(shù)Object.assign(defaults, options);// 創(chuàng)建ajax對(duì)象var xhr = new XMLHttpRequest();// 參數(shù)拼接變量var params = '';// 循環(huán)參數(shù)for (var attr in defaults.data) {// 參數(shù)拼接params += attr + '=' + defaults.data[attr] + '&';// 去掉參數(shù)中最后一個(gè)¶ms = params.substr(0, params.length-1)}// 如果請(qǐng)求方式為getif (defaults.type == 'get') {// 將參數(shù)拼接在url地址的后面defaults.url += '?' + params;}// 配置ajax請(qǐng)求xhr.open(defaults.type, defaults.url, defaults.async);// 如果請(qǐng)求方式為postif (defaults.type == 'post') {// 設(shè)置請(qǐng)求頭xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);// 如果想服務(wù)器端傳遞的參數(shù)類型為jsonif (defaults.header['Content-Type'] == 'application/json') {// 將json對(duì)象轉(zhuǎn)換為json字符串xhr.send(JSON.stringify(defaults.data))}else {// 發(fā)送請(qǐng)求xhr.send(params);}} else {xhr.send();}// 請(qǐng)求加載完成xhr.onload = function () {// 獲取服務(wù)器端返回?cái)?shù)據(jù)的類型var contentType = xhr.getResponseHeader('content-type');// 獲取服務(wù)器端返回的響應(yīng)數(shù)據(jù)var responseText = xhr.responseText;// 如果服務(wù)器端返回的數(shù)據(jù)是json數(shù)據(jù)類型if (contentType.includes('application/json')) {// 將json字符串轉(zhuǎn)換為json對(duì)象responseText = JSON.parse(responseText);}// 如果請(qǐng)求成功if (xhr.status == 200) {// 調(diào)用成功回調(diào)函數(shù), 并且將服務(wù)器端返回的結(jié)果傳遞給成功回調(diào)函數(shù)defaults.success(responseText, xhr);} else {// 調(diào)用失敗回調(diào)函數(shù)并且將xhr對(duì)象傳遞給回調(diào)函數(shù)defaults.error(responseText, xhr);} }// 當(dāng)網(wǎng)絡(luò)中斷時(shí)xhr.onerror = function () {// 調(diào)用失敗回調(diào)函數(shù)并且將xhr對(duì)象傳遞給回調(diào)函數(shù)defaults.error(xhr);} }總結(jié)
以上是生活随笔為你收集整理的搜索框内容自动提示bootstrap ajax的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 记录前端浏览器常见错误SyntaxErr
- 下一篇： 省市区联动三级下拉列表实现