# 4、搜索功能 # 搜索 1.为搜索表单绑定表单提交事件 2.在事件处理函数中阻止表单默认提交行为并且获取到用户输入的搜索关键字 3.跳转到搜索结果页面并且将用户输入的搜索关键字传递到搜索结果页面 4.在搜索结果页面中，从地址栏的查询参数中获取到用户输入的关键字 5.根据用户输入的搜索关键字调用搜索接口，当服务器端返回数据以后,将搜索结果数据和HTML模板进行拼接，最终将拼接好的内容展示在页面中  获取到搜索表单并为其添加表单提交事件 ~~~ //获取到搜索表单并为其添加表单提交事件 $(' .search form') .on(' submit', function () { alert(1) //获取到用户在表单中输入的搜索关键字 var keys = $(this).find(' .keys' ).val(); //跳转到搜索结果页面并且将用户输入的搜索关键字传递到搜索结果T location.href = "/search . html?key=" + keys //阻止表单默认提交行为 return false; }); ~~~ 文章搜索接口  搜索结果 对应的js ~~~ //获取到浏览器地址栏中的搜索关键字 var key = getUrlParams(' key'); //根据搜索关键字调用搜索接口获取搜索结果 $.ajax({ type:' get' ， url: ' /posts/search/' + key, success: function (response) { var html = template( ' searchTpl'，{data: response}); $(' #listBox' ).html(html) ; } }) ~~~