Problem z filtrowaniem wpisów z pomocą select2

Cześć, potrzebuję pomocy z select2
Chcę naklepać dla siebie prosty combobox, gdzie po załadowaniu listy z bazy sqlitowej będzie można filtrować wyniki pisaniem.
Wyrzeźbiłem taki kod:

<label for="payee">Kontrahent</label>
<select id="payee" name="payee_id" style="width: 100%;">
    <!-- select2 sam doda opcje -->
</select>

<script>
    $(document).ready(function() {
        $('#payee').select2({
            ajax: {
                url: 'select_payee.php',
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                     return {
                         results: data.results
                     };
                },
                cache: true
            },
            placeholder: '-- wybierz --',
            allowClear: true
        });
    });
</script>

Lista się ładnie ładuje, ale wpisywanie czegokolwiek nie skutkuje włączeniem filtrowania.
Nie wiem co temu fragmentowi potrzeba jeszcze do szczęścia aby to działało.

Czyli w zasadzie chcesz zrobić taki autocomplete, że można zacząć wpisywać coś, i aplikacja podpowie pasujące elementy?

W sumie tak

No widzisz, wystarczyło odpowiednio nazwać problem, żeby rozwiązanie samo się znalazło. Możesz wpisać w google "js html autocomplete", i dostaniesz bardzo dużo wyników.

Najprostszy nawet nie wymaga JS i PHP:

<label for="fruit">Choose a fruit:</label>
<input list="fruits" id="fruit" name="fruit" />

<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
  <option value="Date">
  <option value="Grape">
</datalist>

Taki element datalist możesz nawet ustawić z JS'a albo z PHP.

A w tym rozwiązaniu co podałeś mogę mieć blokadę, żeby nie dodawało mi elementów spoza listy? Bo w tym swoim rozwiązaniu miałem schowany id, który potem się przydawał dla inserta do bazy.

@BartoSAS twój endpoint zwraca dane w odpowiednim formacie i obsługuje parametry wywołania które generuje select2?

https://select2.org/data-sources/ajax

Tak, na 100%, bo lista się pojawia.

<?php
require 'db.php';
header('Content-Type: application/json'); // Określamy, że odpowiedź to JSON

try {
    $stmt = $db->query("SELECT p.payee_id, p.name as payee_name, p.description, p.subcategory_id, s.name as subcategory_name 
                        FROM Payee p 
                        INNER JOIN Subcategory s ON p.subcategory_id = s.subcategory_id 
                        ORDER BY p.name");

    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $options = [];
    foreach ($rows as $row) {
        $options[] = [
            'id' => $row['payee_id'],
            'text' => $row['payee_name']
        ];
    }

    // Zwrócenie danych w formacie JSON
    echo json_encode(['results' => $options]);

} catch (PDOException $e) {
    die("Błąd zapytania: " . $e->getMessage());
}
?>

Tak przypuszczam, że coś przekombinowałem, ale nie wiem co.

Sprawdź sobie w konsoli przeglądarki czy leci ci w ogóle request do backendu jak coś wpisujesz.
Moze jest jakiś błąd?

W aktualnej konfiguracji request leci dla każdego znaku (defautl minimalnej ilości znaków to 0 dla select2) wiec powinieneś widzieć komunikację.

Sprawdź sobie w konsoli przeglądarki czy leci ci w ogóle request do backendu jak coś wpisujesz.

W jakim sensie do backendu? Mi właśnie zależy, żeby już nie leciało, po prostu ma mi podpowiedzieć item z listy.

Znalazłem teraz takie coś:

<script>
  fetch('select_payee.php')
    .then(r => r.json())
    .then(data => {
      $('#payee').select2({
        data: data.results,
        placeholder: '-- wybierz --',
        allowClear: true
      });
    });
</script>

I nie rozumiem po prostu, dlaczego to działa, a to powyżej nie.

Ok, czyli nie chcesz autocomplete ajaxowego.

Opcja Ajax w select2 służy do tego że jak wpisujesz sobie literki w dropfownie to leci zapytanie do backendu z konkretnym filtrem (to co ci wysłałem dokumentację) i backend ma zwrócić ograniczoną listę.

Ty za każdym razem zwracasz ten sam zestaw danych.

Ten drugi przykład który podałeś po prostu zasila select2 danymi a nie używa opcji Ajax. I to jest pewnie bardziej odpowiednie do tego co chcesz osiągnąć.

BartoSAS napisał(a):

A w tym rozwiązaniu co podałeś mogę mieć blokadę, żeby nie dodawało mi elementów spoza listy? Bo w tym swoim rozwiązaniu miałem schowany id, który potem się przydawał dla inserta do bazy.

Ten autocomplete wbudowany w przeglądarkę niestety nie umożliwia czegoś takiego. Jeśli to ma być taki combobox z szukajką, to chyba faktycznie ten select2 się wydaje dobrym punktem startowym.