时间戳

首页 > 解决方案 > 如何在输入字段的 php 中延迟搜索功能仅在输入 3 个字符后才开始搜索？

javascript - 如何在输入字段的 php 中延迟搜索功能仅在输入 3 个字符后才开始搜索？

问题描述

在输入第一个字符后，我有一个输入字段正在搜索超过 12000 个技能条目。我想在输入 3 个字符或用户停止输入后延迟搜索。

输入字段的类名是：fre-search-skill-dropdown

代码下方。

<div class="col-md-4">
    <div class="fre-input-field dropdown">
        <label for="skills" class="fre-field-title"><?php _e('Skills', ET_DOMAIN); ?></label>
        <input id="skills" class="dropdown-toggle fre-skill-field" type="text" placeholder="<?php _e('Search freelancers by skills', ET_DOMAIN); ?>" data-toggle="dropdown" readonly>
        <?php $terms = get_terms('skill', array('hide_empty' => 0)); ?>
        <?php if (!empty($terms)) : ?>
        <div class="dropdown-menu dropdown-menu-skill">
            <?php if (count($terms) > 7) : ?>
                <div class="search-skill-dropdown">
                <input class="fre-search-skill-dropdown" type="text">
                </div>
            <?php endif ?>
            <ul class="fre-skill-dropdown" data-name="skill">

            <?php
                foreach ($terms as $key => $value) {
                    echo '<li><a class="fre-skill-item" name="'.$value->slug.'" href="">'.$value->name.'</a></li>';
                }
            ?>
            </ul>
        </div>
        <?php endif; ?>
    </div>
</div>

这是用于搜索的 JS 脚本：

        $('.fre-search-skill-dropdown').keyup(function() {
        var _this = this;
        $('.fre-skill-dropdown li').each(function(index, el) {
            if($(this).find('a').text().indexOf($(_this).val()) != -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        if($(_this).val() == '') {
            $('.fre-skill-dropdown li').each(function(index, el) {
                $(this).show();
            });
        }
    });

有没有办法通过修改php文件来实现这一点？

标签： javascriptphpwordpress

解决方案

您可以在更新项目的可见性之前引入延迟。如果输入值在该延迟到期之前发生更改，请取消该更新并重新启动延迟。仅当延迟到期时，才执行更新。

var timer = null; // Reference to the currently pending timeout
$('.fre-search-skill-dropdown').on("input", function() {
    var val = $(this).val();
    clearTimeout(timer); // Clear the pending timeout (if there was one)
    timer = setTimeout(function() {
        $('.fre-skill-dropdown li').each(function() {
            $(this).toggle($(this).find('a').text().indexOf(val) != -1);
        });
    }, 300); // Adapt delay as desired (milliseconds)
});

其他一些变化：

  • input是一个更有趣的事件，因为它也会在通过鼠标（拖入或拖出文本）或上下文菜单或其他设备更改输入时触发。

  • toggleshow是/的一个不错的 jQuery 替代品hide。

推荐阅读