Discussion :

[feelwatt]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

L'input étant :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Quelqu'un aurait-il une idée ?


Ps: j'ai fait des tests avec :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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
});

[feelwatt]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Puis on peut l'utiliser : (Apres json_encode)

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[I]

[feelwatt]

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


A la base il y a ca:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Toufik83]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[feelwatt]

Ok,

il faut charger jQuery une seule fois

A la base, j'ai

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Toufik83]

tu as déjà chargé jQuery ici :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Donc pas la peine de le recharger ici :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Tes importations doivent être comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[feelwatt]

Ok,

Donc pas la peine de le recharger ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Bloque les tooltips,

[Toufik83]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[feelwatt]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[Invité]

...É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")

[feelwatt]

Ok, jreaux62

Merci