Bootstrap 5 多引擎搜索框：实现百度搜索联想功能

使用 Bootstrap 5 创建多引擎搜索框并实现百度搜索联想

本教程将引导您使用 Bootstrap 5 和 JavaScript 创建一个带有搜索框的网页，该搜索框支持 Bing、百度和 360 搜索引擎，并提供百度搜索联想功能，以改善用户体验。

HTML 代码

以下是 HTML 代码，它创建了一个包含搜索框、搜索引擎选项和搜索联想区域的网页结构：

<!DOCTYPE html>
<html>
<head>
    <title>多引擎搜索框</title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css'>
</head>
<body>
    <div class='container mt-5'>
        <div class='input-group mb-3'>
            <input type='text' id='searchInput' class='form-control' placeholder='输入搜索内容'>
            <button class='btn btn-primary' onclick='search()'>搜索</button>
        </div>
        <div class='btn-group'>
            <button class='btn btn-secondary' onclick='searchWithEngine('bing')'>Bing</button>
            <button class='btn btn-secondary' onclick='searchWithEngine('baidu')'>百度</button>
            <button class='btn btn-secondary' onclick='searchWithEngine('360')'>360</button>
        </div>
        <div id='searchSuggestions' class='mt-3'></div>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
    <script>
        // JavaScript 代码 (详见下方)
    </script>
</body>
</html>

JavaScript 代码

以下是 JavaScript 代码，它处理搜索功能、搜索引擎选择和百度搜索联想：

function search() {
    var searchInput = document.getElementById('searchInput');
    var query = searchInput.value;
    window.open('https://www.bing.com/search?q=' + query);
}

function searchWithEngine(engine) {
    var searchInput = document.getElementById('searchInput');
    var query = searchInput.value;
    if (engine === 'bing') {
        window.open('https://www.bing.com/search?q=' + query);
    } else if (engine === 'baidu') {
        window.open('https://www.baidu.com/s?wd=' + query);
    } else if (engine === '360') {
        window.open('https://www.so.com/s?q=' + query);
    }
}

function showSuggestions() {
    var searchInput = document.getElementById('searchInput');
    var query = searchInput.value;
    if (query === '') {
        document.getElementById('searchSuggestions').innerHTML = '';
        return;
    }
    axios.get('https://www.baidu.com/sugrec?prod=pc&wd=' + query)
        .then(function (response) {
            var suggestions = response.data.g;
            var suggestionsHtml = '';
            for (var i = 0; i < suggestions.length; i++) {
                suggestionsHtml += '<div>' + suggestions[i].q + '</div>';
            }
            document.getElementById('searchSuggestions').innerHTML = suggestionsHtml;
        })
        .catch(function (error) {
            console.log(error);
        });
}

var searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', showSuggestions);

代码说明

HTML: 使用 Bootstrap 5 类创建响应式布局，包含搜索框、按钮和搜索联想区域。
JavaScript:
- search(): 默认使用 Bing 搜索引擎打开新窗口进行搜索。
- searchWithEngine(engine): 根据选择的搜索引擎打开新窗口进行搜索。
- showSuggestions(): 使用 Axios 发送请求到百度搜索建议 API，获取并显示搜索联想词。

总结

通过结合 HTML、CSS 和 JavaScript，您可以创建一个功能强大的搜索框，它支持多个搜索引擎并提供百度搜索联想功能，从而改善用户体验并简化搜索过程。