搜索
织梦建站

织梦搜索如何用javascript实现？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 4 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 43 分钟
位置： 首页 › 织梦建站 › 正文

在织梦CMS中，JavaScript通常用于处理前端的交互逻辑，特别是搜索功能，JavaScript可以实现无刷新搜索、搜索建议/自动补全、表单验证等,从而提升用户体验。

织梦搜索 javascript
（图片来源网络，侵删）

下面我将从几个核心场景来拆解织梦搜索相关的JavaScript代码。

标准的搜索表单提交（最常见）

这是最基础的形式，用户输入关键词，点击搜索,页面跳转到搜索结果页。

HTML 表单结构

在织梦的模板文件中（通常是 head.htm, header.htm 或 search.htm）,你会找到这样的表单代码：

<form name="formsearch" action="{dede:global.cfg_cmsurl/}/search.php" method="get">
    <div class="form-search">
        <input type="hidden" name="kwtype" value="0" />
        <input type="hidden" name="searchtype" value="keyword" />
        <input type="text" name="q" id="search-keyword" class="search-keyword" placeholder="请输入搜索关键词" />
        <button type="submit" class="search-submit">搜索</button>
    </div>
</form>

代码解析：

织梦搜索 javascript
（图片来源网络，侵删）
  • action="{dede:global.cfg_cmsurl/}/search.php": 这是表单提交的目标地址，即织梦的搜索程序。{dede:global.cfg_cmsurl/} 是织梦的全局标签,用于获取网站的根目录URL。
  • method="get": 使用 GET 方法提交，这意味着搜索关键词会以 ?q=关键词 的形式出现在URL中,方便用户收藏和分享。
  • <input type="hidden" name="kwtype" value="0" />: 这是一个隐藏字段，用于定义关键词的匹配方式。
    • kwtype=0: 精确匹配
    • kwtype=1: 模糊匹配
  • <input type="hidden" name="searchtype" value="keyword" />: 定义搜索的类型，通常是 keyword（关键词搜索）。
  • <input type="text" name="q" ...>: 这是用户输入搜索关键词的输入框。name="q" 是一个非常通用的做法，很多搜索引擎都使用 q 作为查询参数名。
  • <button type="submit">...</button>: 提交按钮，类型为 submit，点击后会触发表单的 submit 事件，将数据发送到 action 指定的地址。

相关的 JavaScript 代码

对于这个标准表单，通常不需要额外的JavaScript来处理提交，因为浏览器原生就支持 type="submit" 的按钮。

我们经常会用JavaScript来做一些增强，

  • 回车键提交: 在输入框中监听 keydown 事件，当按下回车键（keyCode 为 13）时,触发表单提交。
  • 表单验证: 在提交前检查输入框是否为空。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
    // 获取表单和输入框元素
    const searchForm = document.querySelector('form[name="formsearch"]');
    const searchInput = document.getElementById('search-keyword');
    if (searchForm && searchInput) {
        // 方法一：使用原生 onsubmit 事件（推荐）
        searchForm.onsubmit = function() {
            // 简单的表单验证
            if (searchInput.value.trim() === '') {
                alert('请输入搜索关键词！');
                searchInput.focus(); // 让输入框获得焦点
                return false; // 阻止表单提交
            }
            // 可以在这里添加其他逻辑，比如加载动画等
            return true; // 允许表单提交
        };
        // 方法二：监听输入框的回车键事件
        searchInput.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                // 同样可以在这里做验证
                if (searchInput.value.trim() === '') {
                    alert('请输入搜索关键词！');
                    searchInput.focus();
                    event.preventDefault(); // 阻止回车的默认行为（换行或提交）
                }
            }
        });
    }
});

Ajax 无刷新搜索

这是提升用户体验的关键技术，用户输入关键词后，搜索结果直接显示在当前页,无需刷新或跳转。

织梦搜索 javascript
（图片来源网络，侵删）

工作原理

  1. 监听输入: JavaScript 监听搜索输入框的 input 事件（或 keyup 事件）。
  2. 获取关键词: 当用户输入时,获取输入框的值。
  3. 发送请求: 使用 fetch API 或 XMLHttpRequest (XHR) 向一个后端接口发送异步请求，这个接口可以是一个自定义的PHP文件,用于处理搜索逻辑并返回JSON格式的数据。
  4. 处理响应: 接收到后端返回的JSON数据后，使用JavaScript动态地将数据渲染到页面上的指定区域（一个 <div id="search-results">...</div>）。
  5. 更新UI: 清空旧的搜索结果,显示新的结果。

前端 JavaScript 代码示例

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search-keyword');
    const searchResults = document.getElementById('search-results'); // 用于显示结果的容器
    let debounceTimer; // 用于防抖的计时器
    if (!searchInput || !searchResults) {
        return; // 如果元素不存在，则不执行
    }
    // 监听输入框的输入事件
    searchInput.addEventListener('input', function() {
        const keyword = this.value.trim();
        // 防抖处理：如果用户在短时间内连续输入，只发送最后一次的请求
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            if (keyword === '') {
                searchResults.innerHTML = ''; // 如果清空输入，则清空结果
                return;
            }
            // 使用 Fetch API 发送请求
            // 注意：这里假设你有一个 /ajax_search.php 文件来处理搜索
            fetch(`/ajax_search.php?q=${encodeURIComponent(keyword)}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); // 将响应体解析为JSON
                })
                .then(data => {
                    // 渲染搜索结果
                    renderSearchResults(data);
                })
                .catch(error => {
                    console.error('搜索出错:', error);
                    searchResults.innerHTML = '<p>搜索出错，请稍后再试。</p>';
                });
        }, 300); // 300毫秒的延迟
    });
    // 渲染搜索结果的函数
    function renderSearchResults(data) {
        if (!data || data.length === 0) {
            searchResults.innerHTML = '<p>没有找到相关结果。</p>';
            return;
        }
        let html = '<ul>';
        data.forEach(item => {
            // 这里根据你返回的JSON数据结构来构建HTML
            // 假设返回的数据有 title, arcurl, litpic 等字段
            html += `
                <li>
                    <a href="${item.arcurl}" target="_blank">
                        <img src="${item.litpic}" alt="${item.title}">
                        <h3>${item.title}</h3>
                    </a>
                </li>
            `;
        });
        html += '</ul>';
        searchResults.innerHTML = html;
    }
});

后端 PHP 接口示例 (ajax_search.php)

这个文件需要自己创建,它负责执行数据库查询并返回JSON。

<?php
require_once (dirname(__FILE__) . "/include/common.inc.php"); // 引入织梦核心文件
header('Content-Type: application/json; charset=utf-8');
$keyword = isset($_GET['q']) ? trim($_GET['q']) : '';
if (empty($keyword)) {
    echo json_encode([]);
    exit;
}
// 设置查询条件
$addquery = " AND (title LIKE '%$keyword%' OR body LIKE '%$keyword%')";
// 调用织梦的 getKeywordSearch 函数（或者自己写SQL查询）
// 注意：直接使用SQL拼接有SQL注入风险，生产环境请使用预处理语句。
// 这里为了演示，简化了查询过程。
// 更安全的方式是使用织梦自带的函数，但织梦本身没有直接返回JSON的搜索函数。
// 所以我们通常自己写一个安全的查询。
$results = array();
$dsql->SetQuery("SELECT id, title, litpic, arcurl FROM dede_archives WHERE arcrank > -1 $addquery ORDER BY pubdate DESC LIMIT 10"); // 查询10条结果
$dsql->Execute('t');
while ($row = $dsql->GetArray('t')) {
    $row['arcurl'] = GetFileUrl($row['id'], $row['typeid'], $row['senddate'], $row['title'], $row['ismake'], $row['arcrank'], $row['namerule'], $row['typedir'], $row['money'], $row['filename'], $row['moresite'], $row['siteurl'], $row['sitepath']);
    $results[] = $row;
}
echo json_encode($results);
?>

搜索建议/自动补全

当用户输入时，下方出现一个下拉框，列出相关的热门搜索或历史搜索,用户可以快速选择。

这个功能通常基于 Ajax无刷新搜索 的基础之上，只是返回的数据更少（比如只返回标题）,并且展示方式不同。

HTML 结构

<div class="search-wrapper">
    <form name="formsearch" action="{dede:global.cfg_cmsurl/}/search.php" method="get">
        <input type="text" name="q" id="search-keyword" autocomplete="off" />
        <button type="submit">搜索</button>
    </form>
    <!-- 建议框 -->
    <div id="search-suggestions" class="suggestions-box" style="display: none;"></div>
</div>

JavaScript 代码

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search-keyword');
    const suggestionsBox = document.getElementById('search-suggestions');
    if (!searchInput || !suggestionsBox) return;
    searchInput.addEventListener('input', function() {
        const keyword = this.value.trim();
        // 清除之前的防抖定时器
        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => {
            if (keyword === '') {
                suggestionsBox.style.display = 'none';
                return;
            }
            // 请求建议数据
            fetch(`/get_suggestions.php?q=${encodeURIComponent(keyword)}`)
                .then(response => response.json())
                .then(suggestions => {
                    if (suggestions.length > 0) {
                        showSuggestions(suggestions);
                    } else {
                        suggestionsBox.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('获取建议失败:', error);
                    suggestionsBox.style.display = 'none';
                });
        }, 200); // 建议的延迟可以更短一些
    });
    // 显示建议列表
    function showSuggestions(suggestions) {
        let html = '<ul>';
        suggestions.forEach(suggestion => {
            html += `<li onclick="selectSuggestion('${suggestion}')">${suggestion}</li>`;
        });
        html += '</ul>';
        suggestionsBox.innerHTML = html;
        suggestionsBox.style.display = 'block';
    }
    // 点击页面其他地方时隐藏建议框
    document.addEventListener('click', function(event) {
        if (!searchInput.contains(event.target) && !suggestionsBox.contains(event.target)) {
            suggestionsBox.style.display = 'none';
        }
    });
});
// 全局函数，供建议项的 li 标签的 onclick 事件调用
function selectSuggestion(keyword) {
    document.getElementById('search-keyword').value = keyword;
    document.getElementById('search-suggestions').style.display = 'none';
    // 可以选择性地直接提交表单
    // document.querySelector('form[name="formsearch"]').submit();
}

后端 PHP 接口 (get_suggestions.php)

这个接口可以返回热门关键词、用户历史搜索或简单的匹配结果。

<?php
require_once (dirname(__FILE__) . "/include/common.inc.php");
header('Content-Type: application/json; charset=utf-8');
$keyword = isset($_GET['q']) ? trim($_GET['q']) : '';
$suggestions = [];
// 示例1：从 dede_search_keywords 表获取热门搜索
if (!empty($keyword)) {
    $dsql->SetQuery("keyword FROM dede_search_keywords WHERE keyword LIKE '%$keyword%' ORDER BY count DESC LIMIT 5");
    $dsql->Execute('t');
    while ($row = $dsql->GetArray('t')) {
        $suggestions[] = $row['keyword'];
    }
} else {
    // 示例2：如果没有关键词，返回默认的热门搜索
    $dsql->SetQuery("keyword FROM dede_search_keywords ORDER BY count DESC LIMIT 10");
    $dsql->Execute('t');
    while ($row = $dsql->GetArray('t')) {
        $suggestions[] = $row['keyword'];
    }
}
echo json_encode(array_unique($suggestions)); // 使用 array_unique 避免重复
?>
功能 核心技术 织梦实现要点
标准搜索 HTML Form, GET/POST action 指向 /search.php，name="q" 接收关键词。
Ajax搜索 JavaScript (fetch/XMLHttpRequest), JSON 前端监听 input 事件，发送异步请求。
后端创建PHP接口（如ajax_search.php），使用 $dsql 查询数据库并返回JSON。
搜索建议 Ajax搜索 + DOM操作 在Ajax搜索基础上，简化后端返回数据（只需关键词）。
前端动态创建下拉列表，并处理点击事件。

在开发织梦搜索相关的JavaScript时，关键在于理解织梦的标签如何生成HTML，以及如何利用织梦的核心文件（common.inc.php）和数据库类（$dsql）来创建自己的后端API,实现与前端的完美交互。

-- 展开阅读全文 --
头像
织梦免费HTML5模板如何适配网络公司需求？
« 上一篇 2025-12-10
dede cfg_beian不显示怎么办？
下一篇 » 2025-12-10

相关文章

取消
微信二维码
支付宝二维码

目录[+]