Вызов HTTP-запроса несколько раз на основе функции onchange

Question

Я пытаюсь вызвать GET-запрос несколько раз при заполнении ввода. В основном как фильтр, за исключением того, что он должен вызывать API для каждого нового изменения в строке поиска.

GET работает, потому что при первой загрузке страницы загружаются все данные, потому что строка пуста, но когда я печатаю в строке поиска, она не вызывает функцию PtSearch () внутри setsearch ().

Я регистрирую поиск var в консоли, и он обновляется, как и ожидалось, поэтому единственной проблемой является вызов API.

HTML

        <input id="search"
           type="text"
           class="form-control"
           placeholder="Search"
           aria-label="Example text with button addon"
           aria-describedby="button-addon1"
           onchange="setsearch()"/>

JS

    var search = ""

function setsearch() {
    search = document.getElementById("search").value;
    PtSearch();
};

GET

    function PtSearch() {
    //SEARCH BY FIRST NAME
    $(document).ready(function () {

        var options = {};
        options.url = "https://localhost:44381/api/Patients/" + search;
        options.type = "GET";
        options.dataType = "json";
        options.success = function (patients) {

            patients.forEach(function (patient) {
                $("#result").append(
                    "<tr key=" + patient.patientId + ">" +
                    "<td>" + patient.firstname + "</td>" +
                    "<td>" + patient.lastname + "</td>" +
                    "<td>" + patient.dob + "</td>" +
                    "<td>" + patient.unitId + "</td>" +
                    "<td align=\"center\">" +
                    "<button" +
                    "type=\"button\"" +
                    "class=\"btn btn-sm btn-warning btnspace\">" +
                    "Edit" +
                    "</button>" +
                    "<button" +
                    "type=\"button\"" +
                    "class=\"btn btn-sm btn-danger\"" +
                    "//onClick={this.handleDelete(patient.patientId)}" +
                    ">" +
                    "Delete" +
                    "</button>" +
                    "</td>" +
                    "</tr>"
                )
            });
        };

        options.error = function () {
            $("#msg").html("Error while calling the Web API!");
        };
        $.ajax(options);
    });

API

        // GET: api/Patients/5
    [HttpGet("{search}")]
    public async Task<ActionResult<IEnumerable<Patient>>> GetPatient(string search)
    {

        List<Patient> patient = await _context.Patient.Where(p => p.Firstname.StartsWith(search)).ToListAsync();

        return patient;
    }

EDIT

Это то, что он делает после использования кода @ Qonvex620. Я удалил начальный вызов, чтобы страница загружалась без цели, что специально для проверки панели поиска.

Это начальная загрузка. Все хорошо. Это когда вы вводите одну букву в строке поиска. Все еще работает нормально. Это когда набирается вторая буква. Вы можете видеть, что внизу таблицы он добавляет поиск вместо перезагрузки и показывает только отфильтрованные данные.

Answer 1

Пожалуйста, дважды проверьте свою функцию PtSearch, потому что, как я заметил, на ней нет закрывающей скобки.

Поскольку вы уже используете Jquery. Измените часть своего кода, чтобы максимизировать его красоту.

   $(document).ready(function () {
       var search = $('#search').val();
       PtSearcch(search);   // call search function when script is loaded

     $('#search').change(function() {
         PtSearcch($(this).val());    // call search function when input is  changed
     })

   }

    function PtSearch(search) {
        //SEARCH BY FIRST NAME
            var options = {};
            options.url = "https://localhost:44381/api/Patients/" + search;
            options.type = "GET";
            options.dataType = "json";
            options.success = function (patients) {

                patients.forEach(function (patient) {
                    $("#result").append(
                        "<tr key=" + patient.patientId + ">" +
                        "<td>" + patient.firstname + "</td>" +
                        "<td>" + patient.lastname + "</td>" +
                        "<td>" + patient.dob + "</td>" +
                        "<td>" + patient.unitId + "</td>" +
                        "<td align=\"center\">" +
                        "<button" +
                        "type=\"button\"" +
                        "class=\"btn btn-sm btn-warning btnspace\">" +
                        "Edit" +
                        "</button>" +
                        "<button" +
                        "type=\"button\"" +
                        "class=\"btn btn-sm btn-danger\"" +
                        "//onClick={this.handleDelete(patient.patientId)}" +
                        ">" +
                        "Delete" +
                        "</button>" +
                        "</td>" +
                        "</tr>"
                    )
                });
            };

            options.error = function () {
                $("#msg").html("Error while calling the Web API!");
            };
            $.ajax(options);
  }

Я советую установить задержку не менее чем на 5 секунд, прежде чем вы вызовете свой API, чтобы избежать слишком большого количества запросов к нему.

Answer 2

Вы уже используете jQuery, поэтому лучше использовать метод изменения. Таким образом, вы бы избежали порядка ссылок на функции. Я полагаю, вы не вставили, как в своем проекте, потому что здесь также есть некоторые проблемы с синтаксисом. Как не закрывать свой function PtSearch() и не передавать в него аргумент поиска! function PtSearch(search).

Здесь я использую API Archive.org только для теста, но все же вы можете упростить свой код до следующего вида:

  $(document).on('change keyup', '#search', function() {
    var search = $(this).val();
    var options = {};
            options.url = "https://cors-anywhere.herokuapp.com/https://archive.org/advancedsearch.php?q="+search+"&fl%5B%5D=identifier&sort%5B%5D=&sort%5B%5D=&sort%5B%5D=&rows=100&page=5&output=json";
            options.type = "GET";
            options.dataType = "json";
            options.success = function (patients) {
$("#result").empty();

                patients.response.docs.forEach(function (patient) {
                    $("#result").append(
                        "<tr key=" + patient.identifier + ">" +
                        "<td>" + patient.identifier + "</td>" +
                        "</tr>"
                    )
                });
            };

            options.error = function () {
                $("#msg").html("Error while calling the Web API!");
            };
            $.ajax(options);
            
                

    });

    body {
      background: yellow;
      padding: 20px;
      font-family: Helvetica;
    }
    td{
      border:1px dashed red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search"
               type="text"
               class="form-control"
               placeholder="Search"
               aria-label="Example text with button addon"
               aria-describedby="button-addon1">
           <table id="result">
           
           </table>

Answer 3

Вам нужен прослушиватель событий для вызова функции setsearch, когда есть изменения в вашем поле ввода. Например,

$( "#search" ).change(function() {
  setsearch();
});