效果类似百度搜索下拉出现的结果提示，本站效果如下（主题为原创Typical）

下面进入正题，思路大致是这样的：
首先在搜索input表单下增加一个列表容器ul标签，用来放置ajax输出的搜索结果，后端处理可以添加主题设置和搜索数量；然后JS控制搜索输入时请求搜索结果页的文章列表标题和链接，通过循环附加到早已准备好的ul容器里面。

html准备

找到搜索表单，添加一个放置搜索结果的容器，比如

<div id="search">
    <form class="s-form" action="/?s=">
        <input type="text" name="s" class="s-key" placeholder="输入关键字搜索 ..." style="border:0" />
        <ul id="search-result" data-reusltnum="3"></ul>
        <input type="submit" value="搜 索" class="s-sub tra" title="搜　索"  style="display:none"/>
    </form>
</div>

其中的<ul id="search-result" data-reusltnum="3"></ul>就是列表容器。

JS绑定input输入事件

具体看本人注释

jQuery(document).ready(function($) {
    var sr = $('#search-result'); // 下拉tip的id，也就是容器的id
    if ( sr.length >= 0 ) { // 可用主题设置控制开启
        var i, j = $("#logo a").attr("href"); // 获取本站首页URL链接作为请求用
        $("#search .s-key").on("input", function(b) { // 绑定输入事件
            i = b.timeStamp; // 时间戳
            var c = $(this).val().replace(/\s+/g, " "); // 抓取输入的关键字，去除空格
            $('input[name="s"]').eq(0).attr('autocomplete', 'off'); // 关闭浏览器默认搜索提示
            return " " == c ? !1 : ("" != c ? setTimeout(function() { // 若没有输入内容则false，若有并且没有删除则在输入后500毫秒加载
                0 == i - b.timeStamp && $.ajax({ // ajax输出开始
                    type: "GET",
                    url: j, // 首页链接，以下动作为获取结果页而执行
                    data: "?s=" + c + '&ajx=container', // s=关键字,附加参数为php后端处理
                    beforeSend: function() {
                        sr.empty().show().append('<li><a href="javascript:;" style="text-align:center">Loading...</a></li>'); // 移除ul内的内容-显示列表-显示加载动画
                    },
                    success: function(b) {
                        var c = $(b).find('.post-title a').length, // 显示出来的结果数目
                        d = sr.data("reusltnum"); // 抓取设置的结果数目值
                        // 若为空则显示最大数量，显示少于设置数目则为显示值否则为设置值，没有结果
                        if ("" == d && (d = c), num = d >= c ? c : d, 0 == c)  // 按逗号依次判断三个条件，满足则继续
                            // 移除ul内的内容-显示列表-移除加载动画-返回未找到的提示
                            sr.empty().show().append('<li><a href="javascript:;">没有找到你要搜索的内容</a></li>'); 
                        else { // 不满足
                            var r_href = new Array(), r_text = new Array(); // 定义两个数组用于装载链接和标题
                            $(b).find('.post-title a').each( // 遍历结果页里的所有.post-title的a标签
                            function(r){ // 这个r是必须的，因为下面赋值需要一个对象，对象储存在函数内
                                r_href[r]  = $(this).attr('href'); // 抓取a标签中的href值并检查每一个值（因为在遍历中）并赋值于数组
                                r_text[r]  = $(this).text();  // 抓取a标签的文本值并检查每一个值（因为在遍历中）并赋值于数组
                            });
                            sr.empty().show(); // 移除ul内的内容-显示列表-移除加载动画
                            // 循环输出请求到的结果
                            for (var e = 0; num > e; e++) sr.append('<li><a href="' + r_href[e] + '">' + r_text[e] + "</a></li>");
                        }
                    }
                });
            }, 500) : (sr.empty().hide()), 
            void 0);
        }).blur(function() { // 失去表单焦点时
            var b = $(this).val().replace(/\s+/g, " ");
            ("" == b || " " == b) && (sr.empty().hide());
        });
    }
});

参考CSS

/*搜索提示*/
#search-result{background:#D1E0F0; position:absolute;box-sizing:border-box;width:100%;z-index:99;display:none; }
#search-result li{ white-space:nowrap; }
#search-result li:hover{ margin:0; background:#f5f5f5; }
#search-result a{ display:block; font-size:14px; padding:5px 35px; line-height:30px; overflow:hidden; text-overflow:ellipsis;border-bottom:1px solid #e6e6e6 }

最后说明

这个方法并不是最快的，网上有的用标签来显示结果，但那是不带链接的。由于本主题是全站AJAX，所以无法在搜索结果页search.php添加类似$_SERVER['HTTP_X_REQUESTED_WITH'])这样的头信息进行判断，迫于无奈只好整个页面抓取，不过请求时有&ajx=container的处理，也不算慢了，这样也不需要去改搜索结果页。
That's all.