Question

我有一个输入字段，在输入第一个字符后已经搜索了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文件来实现？

Answer 1

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

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是一个更有趣的事件，因为它也会在通过鼠标（拖入或拖出文本）或上下文菜单或其他设备进行输入更改时触发。
toggle是show / hide的一个不错的jQuery替代品。

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

1 个答案: