时间戳

首页 > 解决方案 > 如何通过点击 JavaScript 输入文本字段内的十字按钮来刷新我的实时搜索？

javascript - 如何通过点击 JavaScript 输入文本字段内的十字按钮来刷新我的实时搜索？

问题描述

我正在进行实时搜索。我使用 ajax 进行了实时搜索，无论我在其中写什么字母，它都会显示与该字母或单词的匹配结果。但是当我单击搜索字段内的十字按钮时会出现问题，它会清除输入字段内的单词，但它不会刷新我的搜索，它不会在搜索之前显示数据，而是显示上一次搜索的结果。

我希望我的实时搜索交叉按钮功能就像这样 - https://codepen.io/gastonbesada/pen/eqvJK 但这是有角度的。我想要 JavaScript 中的代码。

这是我的代码 -

//让这个页面名称为index.php

<div class="search">
       <i class="fa fa-search" ></i>
      <input type="text" id="searchterm" name="searchterm" placeholder="Search" >   
</div>
<table id="result"></table>

//这是index.php的脚本

<script>
$(document).ready(function(){
    load_data();
    function load_data(query)
    {
        $.ajax({
            url:"search.php",
            method:"post",
            data:{query:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }



$('#searchterm').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();            
        }
    });
});
</script>

/* 搜索输入框内十字按钮的脚本*/

<script>

(function ($, undefined) {
    $.fn.clearable = function () {
        var $this = this;
        $this.wrap('<div class="clear-holder" />');
        var helper = $('<span title="Press Backspace" class="clear-helper">&times;</span>');
        $this.parent().append(helper);
        $this.parent().on('keyup', function() {
            if($this.val()) {
            helper.css('display', 'inline-block');
            } else helper.hide();
        });
        helper.click(function(){
            $this.val("");
            helper.hide();
        });
    };
})(jQuery);

$("#searchterm").clearable();
</script>

标签： javascriptphpjqueryajaxmysqli

解决方案

只需再次调用您在其他部分中所做的空值的 ajax。

helper.click(function(){
   $this.val("");
   $this.trigger("keyup");
   helper.hide();
});

推荐阅读