Utiliser array multidim. de php dans jQuery autocomplete

Bonjour,
Autocomplete est vraiment classe,
(https://code.jquery.com/ui/1.12.1/jquery-ui.js">)

aussi je cherche à l'utiliser avec un array provenant de php et encodé avec json_encode

L'array se nomme : array_users

En php il apparait, comme cela :

Code:

---

1 2 3 4

Array ( [1] => Array ( [id_user] => 1 [pseudo_user] => Manseng [mail_user] => <a href="mailto:manseng@free.fr">manseng@free.fr</a>) [2] => Array ( [id_user] => 2 [pseudo_user] => dédé [mail_user] => dédé@free.fr ) )

---

Après json_encode il apparait comme ceci : (dans la console)

Code:

---

1 2 3

{…} ​1: Object { id_user: "1", pseudo_user: "Manseng.", mail_user: "mans@free.fr" } 2: Object { id_user: "2", pseudo_user: "dédé", mail_user: "dédé@free.fr" }

---

Je souhaiterais pouvoir faire l'autocompletion sur : pseudo_user (donc array_users[1] ?)
(et recevoir l'id_user dans un autre champ)

La fonction étant :

Code:

---

1 2 3

$( "#input_users).autocomplete({ source: array_users });

---

L'input étant :

Code:

---

<input id="input_users" type="text">

---

Quelqu'un aurait-il une idée ?


Ps: j'ai fait des tests avec :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var array_users = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran" ]; $( "#users" ).autocomplete({ source: array_users });

---

Après quelques recherches et test
voici ce que j'ai trouvé:
A la création de l'array php
il faut utiliser un index nommé 'label': (je voulais garder le terme provenant de MySql: "pseudo_user", mais apparemment ca ne marche qu'avec le mot 'label')

Code:

---

$array_users[] = array('label' => $results['pseudo_user'], 'id_user' => $results['id_user']);

---

Puis on peut l'utiliser : (Apres json_encode)

Code:

---

1 2 3 4 5 6 7 8

$("#input_users").autocomplete({ source:array_users, select: function(event, ui) { event.preventDefault(); $("#autocomp_frns").val(ui.item.label); $("#autocomp_frns_id").val(ui.item.id_user); } });

---

Là on envoi dans un autre input l'id_user (ca peut servir):

Code:

---

$("#autocomp_frns_id").val(ui.item.id_user);

---

[I]

Oups!
Suite à tout ca,
les tooltips ne fonctionnent plus


A la base il y a ca:

Code:

---

1 2 3 4

<!-- Bootstrap core JavaScript--> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

---

Pour autocomplete, j'ai ajouté ca:

Code:

---

1 2	<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

N'y aurait-il pas conflit entre les jquery ?

Salut,

Pour les tooltips il faut charger jQuery une seule fois et pas plusieurs, sinon ça marche pas.


L'auto-complétion de jQuery nécessite 2 items dans le tableau, c'est label et id, donc remplace id_user par id.

Code:

---

array('label' => $results['pseudo_user'], 'id' => $results['id_user']);

---

Ok,

Citation:

---

il faut charger jQuery une seule fois

---

A la base, j'ai

Code:

---

1 2	<script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

---

et pour l'autocomplétion, j'ai ajouté:

Code:

---

1 2	<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

Lequel contient les tooltips et l'autocomplétion ?

tu as déjà chargé jQuery ici :

Code:

---

<script src="vendor/jquery/jquery.min.js"></script>

---

Donc pas la peine de le recharger ici :

Code:

---

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

---

Tes importations doivent être comme ceci :

Code:

---

1 2 3 4 5

<script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

Ok,

Citation:

---

Donc pas la peine de le recharger ici :

Code:

---

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

---

---

Ok
Par contre d'après ce que je vois,

Code:

---

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

Bloque les tooltips,

Je viens de remarquer que tu n'as pas chargé bootstrap.js (sans oublier bien sûr les fichiers css correspondants ...)

Et en mettant jQuery.ui avant bootstrap? toujours le même problème ?

Code:

---

1 2 3 4 5 6

<script src="vendor/jquery/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!-- jQuery.ui avant bootstrap.min.js --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><!-- Latest compiled bootstrap 4 JavaScript --> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

---

Ok,
Merci super
ca gère bien et les tooltips et les ui autocompletion.

Par contre il faut cliquer 2 fois pour ouvrir les liens dropdown-toggle

Code:

---

1 2 3

<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-fw fa-envelope"></i> </a>

---

Étonnamment, en enlevant

Code:

---

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><!-- Latest compiled bootstrap 4 JavaScript -->

---

Tout fonctionne
Pour info, je suis sur startbootstrap-sb-admin-gh-pages.

Citation:

---

Envoyé par feelwatt

...Étonnamment, en enlevant...

---

Il faut vraiment que tu lises la doc : Bootstrap Contents

• bootstrap.bundle(.min).js INCLUS DEJA bootstrap(.min).js, AINSI QUE popper.js. ("bundle" signifie "paquet", "lot")

Ok, jreaux62

Merci