Проблема с источником данных json при автозаполнении пользовательского интерфейса

Question

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

JS код:

let marque_id =$("#marque_id").val();
    $( "#grp_name" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:"abonne/ajax_get_grp_autorisation",
                method:"POST",
                dataType: "json",
                data: {
                    marque_id : id_marque
                },
                success: function( data ) {
                    response( data );
                    console.log(data);
                }
            });
        },
        select: function (event, ui) {
            // Set selection
            $('#grp_name').val(ui.item.label); // display the selected text
            $('#id_grp_selected').val(ui.item.id); // save selected id to input
            return false;
        } 
    });

PHP код:

$data = array();
while($line = mysqli_fetch_object($liste_grp) ){
    $data[] = array("label"=>$line->grp_nom,"value"=>$line->grp_nom ,"id"=>$line->groupement_id);
}  
echo json_encode($data);

результат

Answer 1

Я бы посоветовал следующее jQuery:

$( "#grp_name" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url:"abonne/ajax_get_grp_autorisation",
      method:"POST",
      dataType: "json",
      data: {
        marque_id: request.term
      },
      success: function( data ) {
        console.log(data);
        response(data);
      }
    });
  },
  select: function (event, ui) {
    // Set selection
    $('#grp_name').val(ui.item.label); // display the selected text
    $('#id_grp_selected').val(ui.item.id); // save selected id to input
    return false;
  } 
});

Это небольшое изменение.Это отправит request.term на ваш скрипт PHP.Например, если пользователь введет «gro», он будет отправлен в ваш скрипт и будет доступен через:

$_POST['marque_id']

Это предполагает, что ваш SQL-запрос выглядит примерно так:

$stmt = $mysqli->prepare("SELECT * FROM table WHERE column LIKE '?%'");
$stmt->bind_param("s", $_POST['marque_id']);
$stmt->execute();
$liste_grp = $stmt->get_result();
$data = array();
while($line = $liste_grp->fetch_assoc()) {
  $data[] = array(
    "label" => $line['grp_nom'],
    "value" => $line['grp_nom'],
    "id" => $line['groupement_id']
  );
}
$stmt->close();
header('Content-Type: application/json');
echo json_encode($data);

Использует Подготовленный оператор MySQLi и поможет предотвратить SQL-инъекцию.Я также включил заголовок JSON в качестве хорошей практики.Результат поиска "gro" будет выглядеть примерно так:

[
  {
    "label": "GROUPE DATAPNEU TEST",
    "value": "GROUPE DATAPNEU TEST",
    "id": 1
  }
];

Answer 2

Спасибо, ребята, я нашел решение, оно работает лучше, я использовал tokeninput с большим количеством опций

http://loopj.com/jquery-tokeni

$.ajax({
        url:"ajax_get_societe_authorisation",
        method:"POST",
        scriptCharset: "iso-8859-1",
        cache: false,
        dataType: "json",
        data: {
            marque_id : id_marque
        },
        success: function( data ) {
        console.log(data);
        $("#soc_name").tokenInput(data
        ,{
            tokenLimit: 1,
            hintText: "Recherche une société par son nom",
            noResultsText: "Aucune société trouvé",
            searchingText: "Recherche en cours ...",
            onAdd: function (data) {
                $("#soc_id").val(data.id);
            },
            onDelete: function (item) {
                $("#soc_id").val("");
            }
        }

    );
    }
    });

Answer 3

Вы должны отправить искомый текст в ajax-запрос, чтобы ваша функция автозаполнения была

let marque_id =$("#marque_id").val();
    $( "#grp_name" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:"abonne/ajax_get_grp_autorisation",
                method:"POST",
                dataType: "json",
                data: {
                    marque_id : id_marque , 
                    term: request.term       
                },
                success: function( data ) {
                    response( data );
                    console.log(data);
                }
            });
        },
        select: function (event, ui) {
            // Set selection
            $('#grp_name').val(ui.item.label); // display the selected text
            $('#id_grp_selected').val(ui.item.id); // save selected id to input
            return false;
        } 
    });

request.term - это текст вашего поиска, а в вашем примере это текст группы

а также вам нужно изменить запрос MySQL и добавить условие (например), например

$rs = mysql_query("SELECT * FROM table WHERE colum LIKE '%" . $_POST['term'] . "%'");

, и, наконец, вы можете проверить https://jqueryui.com/autocomplete/#remote-jsonp