搜索框内容自动提示bootstrap ajax
生活随笔
收集整理的這篇文章主要介紹了
搜索框内容自动提示bootstrap ajax
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>搜索框輸入文字自動提示</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="請輸入搜索關鍵字" 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')// 存儲定時器的變量var timer = null;// 當用戶在文本框中輸入的時候觸發searchInp.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) {// 使用模板引擎拼接字符串var html = template('tpl', {result: result});// 將拼接好的字符串顯示在頁面中listBox.innerHTML = html;// 顯示ul容器listBox.style.display = 'block';}})}, 800)}</script>
</body></html>
ajax.js
function ajax (options) {// 默認值var defaults = {type: 'get',url: '',async: true,data: {},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: function () {},error: function () {}}// 使用用戶傳遞的參數替換默認值參數Object.assign(defaults, options);// 創建ajax對象var xhr = new XMLHttpRequest();// 參數拼接變量var params = '';// 循環參數for (var attr in defaults.data) {// 參數拼接params += attr + '=' + defaults.data[attr] + '&';// 去掉參數中最后一個¶ms = params.substr(0, params.length-1)}// 如果請求方式為getif (defaults.type == 'get') {// 將參數拼接在url地址的后面defaults.url += '?' + params;}// 配置ajax請求xhr.open(defaults.type, defaults.url, defaults.async);// 如果請求方式為postif (defaults.type == 'post') {// 設置請求頭xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);// 如果想服務器端傳遞的參數類型為jsonif (defaults.header['Content-Type'] == 'application/json') {// 將json對象轉換為json字符串xhr.send(JSON.stringify(defaults.data))}else {// 發送請求xhr.send(params);}} else {xhr.send();}// 請求加載完成xhr.onload = function () {// 獲取服務器端返回數據的類型var contentType = xhr.getResponseHeader('content-type');// 獲取服務器端返回的響應數據var responseText = xhr.responseText;// 如果服務器端返回的數據是json數據類型if (contentType.includes('application/json')) {// 將json字符串轉換為json對象responseText = JSON.parse(responseText);}// 如果請求成功if (xhr.status == 200) {// 調用成功回調函數, 并且將服務器端返回的結果傳遞給成功回調函數defaults.success(responseText, xhr);} else {// 調用失敗回調函數并且將xhr對象傳遞給回調函數defaults.error(responseText, xhr);} }// 當網絡中斷時xhr.onerror = function () {// 調用失敗回調函數并且將xhr對象傳遞給回調函數defaults.error(xhr);} }總結
以上是生活随笔為你收集整理的搜索框内容自动提示bootstrap ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 记录前端浏览器常见错误SyntaxErr
- 下一篇： 省市区联动三级下拉列表实现