Moje autouzupełnianie działa poprawnie, jeśli są do niego wprowadzane na stałe zakodowane dane. Moje PHP zwraca wynik JSON. Nie jestem pewien, dokąd zmierzam źle.

HTML

<div class="form-group bgcolor">
  <label for="send_to">Direct to: </label><input type="text" name="send_to" id="send_to" class="form-control send_to typeahead" placeholder="Leave blank normally">
</div>

Jquery

        $('.typeahead').typeahead({
          source: {
              groupName: {
               ajax({
                url: 'scripts/order_messaging.php',
                method: 'POST',
                data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
                contentType: 'application/json',
                dataType: 'json',
                success:function(data)
                {
                 result($.map(data, function(item){
                  return item;
                 }));
                }
              })
            },
         },
         debug: true
        });

PHP

//autocomplete user name for user_to
if ( $_POST['action'] == 'autocomplete_to_user' ) {
    $stmt = $pdo->prepare('select * from login where username like :query');
    $stmt->bindValue('query', '%'.$_POST['query'].'%');
    $stmt->execute();
    $result = array();
    while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
        array_push($result, $user_name->username);
    }
    echo json_encode($result);
}

Myślę, że to ta linia w moim jQuery: data: {action: 'autocomplete_to_user', query:query}, Może mam problem ze składnią.

0
mongoose00318 3 kwiecień 2020, 22:02

4 odpowiedzi

Najlepsza odpowiedź

Cóż, po wielu próbach i błędach otrzymałem autouzupełnianie działające przy użyciu jQuery .autocomplete.

Nie wiem, co robiłem źle z Typeahead, ale dokumentacja była trudna do zrozumienia (prawdopodobnie z powodu mojego ograniczonego doświadczenia z jQuery).

Wszystkim, którzy w przyszłości będą potrzebować pomocy; oto samouczek, który okazał się pomocny: samouczek autouzupełniania jquery ui

Dziękuję wszystkim

0
mongoose00318 6 kwiecień 2020, 15:13

Moim skromnym zdaniem dokumentacja zawiera błędy. Na przykład w demach, a konkretnie w przykładzie Country v2 stany

Żądanie POST zostanie wysłane z danymi myKey: myValue

W rzeczywistości żądanie wysyłane w przykładzie to GET, ponieważ zależy to od klucza type obiektu ajax z pierwszego źródła ( kraj w tym przypadku), który nie jest ustawiony, dlatego domyślnie jest ustawiony na GET.

A więc, biorąc to pod uwagę, naprawdę powinieneś trzymać się proponowanej struktury HTML (przynajmniej zacznij od niej, a następnie stopniowo usuwaj rzeczy, których nie chcesz, o ile ci na to pozwoli).

HTML

<form id="form-country_v2" name="form-country_v2">
    <div class="typeahead__container">
        <div class="typeahead__field">
            <div class="typeahead__query">
                <input class="typeahead" name="country_v2[query]" placeholder="Search" autocomplete="off">
            </div>
            <div class="typeahead__button">
                 <button type="submit">
                     <i class="typeahead__search-icon"></i>
                 </button>
            </div>
        </div>
    </div>
</form>

JS

$(document).ready(() => {
  $('.typeahead').typeahead({
    template: "{{display}} <small style='color:#999;'>{{group}}</small>",
    source: {
      users: { //might as well be 'willy wonka', it doesn't matter
        ajax: {
          type: "POST",
          url: "scripts/order_messaging.php",

          //this is not actually needed for the request to work (reach the server),
          //this is used to access said request's returned data, it all
          //depends on how you structure the response in the server,
          //check out the php part
          path: "data.users",

          data: {
            action: 'autocomplete_to_user',
            query: 'username'
          }
        }
      }
    },
    callback: {
      //this is just to help you show the response in the html
      onResult: function(node, query, result, resultCount) {
        if (query === "") return;

        var text = "";

        if (result.length > 0 && result.length < resultCount) {
          text = "Showing <strong>" + result.length + "</strong> of <strong>" + resultCount + '</strong> elements matching "' + query + '"';
        } else if (result.length > 0) {
          text = 'Showing <strong>' + result.length + '</strong> elements matching "' + query + '"';
        } else {
          text = 'No results matching "' + query + '"';
        }
        $('#result-container').html(text);

      },
      onInit: function(node) { //and this is just informational
        console.log('Typeahead Initiated on ', node, node.selector);
      }
    }
  });
});

Order_messaging.php

if ($_POST['action'] == 'autocomplete_to_user') {
    $stmt = $pdo->prepare('select * from login where username like :query');
    $stmt->bindValue('query', '%' . $_POST['query'] . '%');
    $stmt->execute();
    $result = array();
    while ($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
        array_push($result, $user_name->username);
    }

    echo json_encode(array(
        "status" => true,
        "error" => null,

        //here you use whatever structure you want to return the data in,
        //as long as the payload is an array ($result).
        //remember in the JS you are expecting 'data.users'?
        //this is where it's coming from
        "data" => array(
            "users" => $result,
        )
    ));
} else
    echo json_encode(array(
        "status" => true,
        "error" => null,
        "data" => array(
            "users" => [],
        )
    ));

CZEŚĆ

1
Scaramouche 4 kwiecień 2020, 23:26

Przetestowałem bibliotekę i musisz zmienić dwie rzeczy, aby działała.

1) Musisz zmienić strukturę parametru source. Dałeś mu oddzwonienie AJAX, które nie jest obsługiwane. Zgodnie z dokumentacją akceptuje tablicę lub obiekt z ustawieniami, więc AJAX należy zdefiniować w następujący sposób:

$('.typeahead').typeahead({
    source: {
        // source has an "ajax" property where you just need to place
        // the object with AJAX params (the one you'd normally place inside
        // an $.ajax() call)
        ajax: {
            url: 'scripts/order_messaging.php',
            method: 'POST',
            data: {
                action: 'autocomplete_to_user',
                query: query,
            },
            dataType: 'json',
            path: '',
        },
    },
});

Właściwość path obiektu ajax jest tutaj kluczowa. Mówi funkcji typeahead, gdzie szukać danych zwróconych przez akcję AJAX. Ponieważ kodujesz jednowymiarową tablicę wartości, musisz ustawić ją na pusty ciąg, co oznacza, że Twoje dane znajdują się w katalogu głównym odpowiedzi.

Gdybyś miał na przykład zwrócić tablicę taką jak echo json_encode(['users' => $result]);, to musiałbyś ustawić ścieżkę na 'users' (ponieważ jest to indeks w odpowiedzi, który zawiera Twoje dane).

2) Aby to działało, musisz przestrzegać ścisłej struktury HTML:

<div class="typeahead__container">
    <div class="typeahead__field">
        <div class="typeahead__query">
            <input class="js-typeahead" name="q" autocomplete="off">
        </div>
    </div>
</div>

Jeśli pominiesz którykolwiek z tych elementów, nie wyzwoli to funkcjonalności. Ta struktura HTML jest jedną z pierwszych rzeczy, o których wspominają w dokumentacji.

0
El_Vanja 4 kwiecień 2020, 00:36

Zgodnie z dokumentacją jQuery Ajax dataType: 'json' ocenia odpowiedź jako JSON i zwraca Obiekt JavaScript.

Musisz uszeregować swoje dane za pomocą JSON.stringify({action: 'autocomplete_to_user', query:query}) przed wysłaniem ich do PHP. Musisz także dodać nagłówek Content-Type: 'application/json', który powie Ci, że kod PHP żądający danych to JSON. Możesz to zrobić, dodając contentType: 'application/json' w ustawieniach Ajax.

Twój ostateczny kod jQuery wyglądałby następująco:

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

Szczegółowe informacje na temat trybu można znaleźć w dokumentacji jQuery Ajax. Mam nadzieję że to pomoże!

EDYTOWAĆ:

Aby odczytać JSON, musisz zaktualizować swój kod PHP. Skorzystaj z tego linku. Twój kod PHP powinien wyglądać następująco:

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>

1
Ravi Desai 3 kwiecień 2020, 20:36