Что не так с этим скриптом автозаполнения?

Question

Вот моя HTML-страница.

<form action="" method="post">
    <input type="text" class="auto" name="search" autocomplete="off">
</form>
<script>
  $(document).ready(function($){
    $('.auto').autocomplete({
    source:'connect.php', 
    minLength:1
    });
});
</script>

Вот мой connect.php

if(isset($_GET['term'])) {
  require "db.php";

  $con = mysqli_connect("$host","$user","$password","$db");

  if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

  $term = mysqli_real_escape_string($con, $_GET['term']);
  $term = strtolower($term);
  $query = "SELECT `name` FROM `products` WHERE `name` LIKE '%$term%'";
  $result = mysqli_query($con, $query);
  $return_array = array();
    while($row = mysqli_fetch_array($result)) {

        $return_array[] = $row;
    }
    echo json_encode($return_array);
}

Используя инструменты Chrome для проверки ответа, он выглядит следующим образом:

[{"0":"MacBook Pro 13-inch","name":"MacBook Pro 13-inch"},{"0":"MacBook Pro 15-inch","name":"MacBook Pro 15-inch"},{"0":"MacBook Air 13-inch","name":"MacBook Air 13-inch"},{"0":"MacBook Air 11-inch","name":"MacBook Air 11-inch"},{"0":"iMac 21.5-inch","name":"iMac 21.5-inch"},{"0":"iMac 27-inch","name":"iMac 27-inch"},{"0":"Mac Pro Quad-Core","name":"Mac Pro Quad-Core"},{"0":"Mac Pro 6-Core","name":"Mac Pro 6-Core"}]

Но на странице я получаю "Нет результатов поиска".

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

Пожалуйста, не используйте PDO, так как я могу понять только базовый процедурный код.

Answer 1

Как уже указывал rodrigogq, автозаполнение пользовательского интерфейса jQuery принимает данные в двух формах:

Либо массив строк:

[ "value1", "value2" ]

Или массив объектов, имеющих свойства label и value:

[  { label:"value1", value:0},  { label:"value2", value:1}, ]

---

У вас есть два варианта: изменить сценарий на стороне сервера, чтобы обеспечить правильный ответ,

или же

Измените сценарий на стороне клиента, чтобы очистить ответ сервера.

Ниже приводится последнее, в соответствии с ответом, которым вы поделились:

$(document).ready(function($){
  $('.auto').autocomplete({
    source: function(request, response) {
      $.get('connect.php', { term: request.term }, function(data) {
        var matches = $.map($.parseJSON(data),function(obj){
          return obj.name;
        });
        response(matches);
      });
    }, 
    minLength:1
  });
});

Answer 2

Чтобы дать вам представление о том, что происходит не так: с вашим кодом:

$(document).ready(function(){
    $('.auto').autocomplete({
        source:'test1.php',
        minLength:1
    });
});

и этот фиктивный PHP-файл test1.php:

echo json_encode(array('alpha', 'alphabet', 'beta'));

автозаполнение работает. Итак, вы должны изменить:

   while($row = mysqli_fetch_array($result)) {
        $return_array[] = $row;
    }
    echo json_encode($return_array);

в:

   while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
        $return_array[] = $row['name'];
    }
    echo json_encode($return_array);

Answer 3

Что значит $(document).ready(function($){ имею в виду? Так должно быть $(document).ready(function(){ (обратите внимание на $).

Кроме того, попробуйте отправить полный URL-адрес на ваш source вариант, как http://www.yoursite.com/connect.php,

РЕДАКТИРОВАТЬ

Также, пожалуйста, прочитайте это: http://api.jqueryui.com/autocomplete/

Как видите, вы можете предоставить массивы как:

   [ "value1", "value2" ]

Или же:

   [  { label:"value1", value:0},  { label:"value2", value:1}, ]