基于jquery的仿百度搜索框效果代码

这里是一个基于jQuery实现的仿百度搜索框效果的代码示例:HTML:

<p id="search-box">
    <input type="text" id="search-input">
    <button id="search-button">搜索</button>
</p>
<p id="search-results">
    <ul>
        <li><a href="#">Result 1</a></li>
        <li><a href="#">Result 2</a></li>
        <li><a href="#">Result 3</a></li>
    </ul>
</p>

JavaScript:

$(function() {
    // 点击搜索按钮或按回车键搜索
    $("#search-button,#search-input").on("click keypress", function(e) {
        if (e.type == "click" || e.which == 13) {
            search();
        }
    });

    // 输入字符时显示搜索结果
    $("#search-input").on("input", function() {
        showResults();
    });

    function search() {
        // 发送Ajax请求并显示搜索结果
        $.ajax({
            url: "/search",
            data: { query: $("#search-input").val() },
            success: function(data) {
                $("#search-results ul").html(data);
                showResults();
            }
        });
    }

    function showResults() {
        $("#search-results").show();
        // 获取输入值并高亮显示
        let value = $("#search-input").val();
        $("#search-results a:contains('" + value + "')").addClass("highlight");
    }
}); 

这个代码实现了:

1. 点击搜索按钮或按回车键触发搜索操作,发送Ajax请求获取数据并显示搜索结果。

2. 输入字符时显示搜索结果框,并高亮显示匹配的结果项。

3. 获取输入框值并高亮显示能实现实时搜索提示效果。

4. 使用$.ajax()发送Ajax请求获取搜索数据,并动态生成<a>链接显示结果。

5. 使用`.show()`、`.addClass()`等jQuery方法操作DOM实现交互效果。

6. 使用事件委托在文档加载完成后绑定事件,实现搜索框外部也能触发搜索效果。

这样,通过一些简单的jQuery代码,就实现了一个类似百度搜索框的交互搜索效果。