时间戳

首页 > 解决方案 > AJAX live keyup 搞砸了搜索

javascript - AJAX live keyup 搞砸了搜索

问题描述

此特定代码执行学生姓名的实时 AJAX 搜索。它适用于keyup功能。

Backspace当我按下键并加载search.php文件时，此脚本正在执行 AJAX 。

我不希望此功能适用于任何键，但只能适用于字母表。

$(document).ready(function() {
  load_data();

  function load_data(query) {
    $.ajax({
      url: "search.php",
      method: "POST",
      data: {
        query: query
      },
      success: function(data) {
        $('#result').html(data);
      }
    });
  }
  $('#search_text').keyup(function() {
    var search = $(this).val();
    if (search != '') {
      load_data(search);
    } else {
      load_data();
    }
  });
});

到目前为止，这就是我学到的所有东西，所以如果有任何其他方法可以做到这一点，那将会很有帮助。谢谢你。

标签： javascriptcssarraysajax

解决方案

试试这个：

$(document).ready(function() {

    load_data();

    function load_data(query) {
        $.ajax({
            url: "search.php",
            method: "POST",
            data: {
                query: query
            },
            success: function(data) {
                $('#result').html(data);
            }
        });
    }

    $('#search_text').keyup(function(ev) {
        var searchString = $(this).val();
        if (searchString != '') {
            var letters = /^[A-Za-z]+$/;
            if (searchString.match(letters)) {
                load_data(searchString);
            } else {
                load_data();
            }
        }
    });

});

-- 编辑 -- 根据您的评论，下面的代码将返回一个切片值；从我们的搜索中删除最后一个或无效的字符。

$(document).ready(function() {

    load_data();

    function load_data(query) {
        $.ajax({
            url: "search.php",
            method: "POST",
            data: {
                query: query
            },
            success: function(data) {
                $('#result').html(data);
            }
        });
    }

    $('#search_text').keyup(function(ev) {
        var searchString = $(this).val();
        if (searchString != '') {
            var letters = /^[A-Za-z]+$/;
            if (searchString.match(letters)) {
                load_data(searchString);
            } else {
                searchString = searchString.substring(0, searchString.length - 1);
                $('#search_text').val(searchString);
            }
        }
    });

});

-- 编辑（第三次请求）下面的代码将清除您的结果 div 是最后一个 keyup 确定搜索输入框为空（不包含值）。

$(document).ready(function() {

    load_data();

    function load_data(query) {
        $.ajax({
            url: "search.php",
            method: "POST",
            data: {
                query: query
            },
            success: function(data) {

                $('#result').html(data);

            }
        });
    }

    $('#search_text').keyup(function(ev) {

        var searchString = $(this).val();

        if (searchString != '') {

            var letters = /^[A-Za-z]+$/;

            if (searchString.match(letters)) {

                load_data(searchString);

            } else {

                searchString = searchString.substring(0, searchString.length - 1);
                $('#search_text').val(searchString);

            }

        } else {

            $('#result').html('');
        }
    });

});

推荐阅读