Результаты автозаполнения JQueryUI не отображаются, но появляются в DevTools - PullRequest
Новая
       43

Результаты автозаполнения JQueryUI не отображаются, но появляются в DevTools

0 голосов
/ 26 сентября 2019

Я работаю над основным окном поиска для большого списка людей на нашем сервере MySQL, используя автозаполнение JQueryUI и PHP, хотя при вводе реального приглашения выпадающий список результатов не отображается.

Я зарегистрировался в DevTools, и данные очень хорошо отображаются на основе моего термина.

Условие поиска

Результаты DevToolsЗдесь 

$(function() {
    $("#search").autocomplete({
        source: function(request, response) {
            $.ajax({
                type: "GET",
                url: "search.php",
                data: {
                    term: $("#search").val()
                },
                dataType: "json",
                success: function(data) {
                    response($.map(data, function(item) {
                        return item.Name;
                    }));
                }
            });
        }
    });
});

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

<?php
    require_once 'db.php';

    $search = $_GET['term'];

    $search = "%".$search."%";

    $searchAlumni = $pdo->prepare("SELECT CONCAT(Last,', ', First) AS Name FROM Constituents WHERE Last LIKE :last");
    $searchAlumni->bindParam(':last', $search);
    //$searchAlumni->bindParam(':first', $search);
    $searchAlumni->execute();

    while($result = $searchAlumni->fetch()) {
        echo json_encode($result);
    }

?>

Любая помощь или предложения будут с благодарностью.

1 Ответ

0 голосов
/ 26 сентября 2019

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

JavaScript 

$(function() {
  $("#search").autocomplete({
    minLength: 3,
    source: function(request, response) {
      $.getJSON("search.php", { term: request.term }, function(data) {
        var results = [];
        $.each(data, function(i, name){
          results.push(name);
        });
        response(results);
      });
    }
  });
});

Это не сильно отличается от вашего кода.Использование $.getJSON() - это просто сокращение от того, что вы написали в $.ajax().Преимущество здесь в том, что вы всегда получите массив результатов, даже если он пустой.Поэтому он всегда будет вызывать ответ.

Как вы упомянули, вы получите "большой список" имен, я советую использовать опцию minLength.

Минимальное количество символовпользователь должен ввести, прежде чем поиск будет выполнен.Ноль полезен для локальных данных с несколькими элементами, но более высокое значение следует использовать, когда поиск по одному символу может соответствовать нескольким тысячам элементов.

Так что, если вы хотите, чтобы он начал отвечать быстрее,рассмотрим 2.Например, если пользователь вводит «jo», ваши результаты могут включать: «jon», «john», «joanna», «bojon» и т. Д. ... Используя 3, пользователь вводит «joh», и все равнополучить "Джон", но это будет быстрый и меньший набор результатов.

PHP 

<?php
require_once 'db.php';
$search = $_GET['term'];
$searchAlumni = $pdo->prepare("SELECT CONCAT(Last,', ', First) AS Name FROM Constituents WHERE Last LIKE :last");
$searchAlumni->bindParam(':last', "%$search%");
$searchAlumni->execute();
$results = array();
while($result = $searchAlumni->fetch(PDO::FETCH_OBJ)) {
  array_push($results, $result->Name);
}
header('Content-Type: application/json');
echo json_encode($results);
?>

Опять не кардинально отличается.Вы можете видеть в операторе while, что мы заполняем массив только результирующими данными Name из извлеченного объекта.Это должно создать массив вроде: 

[
  "Smith, John",
  "Smith, Jane"
]

Этот полный массив затем выводится через JSON.Подробности заголовка помогают браузеру узнать, какой тип данных отправляется обратно.В наши дни это просто хорошая форма, так как jQuery делает многое, чтобы предвидеть.

Вы также должны подумать, что делать, если есть ошибка запроса и как ее обработать в PHP, что отправить обратно в JavaScript и какобрабатывать это и в JS.

...