搜索框内容自动提示bootstrap ajax -凯发k8官方网
凯发k8官方网
收集整理的这篇文章主要介绍了
搜索框内容自动提示bootstrap ajax
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<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);} }总结
以上是凯发k8官方网为你收集整理的搜索框内容自动提示bootstrap ajax的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 记录前端浏览器常见错误syntaxerr
- 下一篇：