smart search front sample

最新推荐文章于 2024-11-05 21:37:11 发布

scofield06

最新推荐文章于 2024-11-05 21:37:11 发布

阅读量109

点赞数

分类专栏：脚步语言文章标签： ajax html

本文链接：https://blog.csdn.net/scofield06/article/details/84920619

版权

脚步语言专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<body>
<div style="margin-top: 300px;margin-left: 520px;">
<form action="{{url_for('api.Ajax_ajax_load_course')}}" method="get" style="margin: auto 0;">
请输入单词或课程名称：<br/>
<input type="text" id="search-text" name="q"><button type="button" id='search-button'>搜索</button>
<p><span id='search-result'></span></p>
</form>
</div>
<script src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
<script>
$(document).ready(function(){
$("#search-text").keyup(function(){
var q = $("#search-text").val();
$.get("{{url_for('api.Ajax_ajax_load_course')}}",{'q':q}, function(data){
for (var i = data.length - 1; i >= 0; i--) {
$('#search-result').append(data[i]+'<br/>')
};
})
});
$('#search-text').keydown(function(){
$('#search-result').empty();
})
$('#search-text').blur(function(){
$('#search-result').empty();
})
});
</script>
</body>
</html>