Champ en autocompletion Ajax

typeaheadjs fait ça très bien

Mais c'est parfait ça =D

Maintenant ma question sera, comment je fais pour faire passer mes données récupérées en php dans ce tableau JS ? (Oui je suis vraiment mauvais en JS...)

Je précise que je ne cherche pas à ce qu'on me fasse le script mais j'aimerais bien avoir les éléments nécessaires pour réaliser celà :)

Côté JS

var providers = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: '/ton_url/%QUERY.json'
});

providers.initialize();

$('#ton_formulaire')
  .typeahead(null, {
    name: 'providers',
    displayKey: 'value',
    source: providers.ttAdapter()
  })
  .on('typeahead:selected',function(obj, datum, name){
     //ta logique, la valeur sélectionnée est dans datum
     console.log(datum);
  });

Pour php, tu gère la requête GET /ton_url/%QUERY.json
et tu retourne un json

Ok d'accord :)

Je vais tenter ça et je reviens poster mon retour :)

Une question du coup, selon ton code je suis censé réaliser mon json comment ?

Je pensais à

<?php
json_encode(array('datum' => $provider['p_name'], 'name' =>$provider['p_id']));

Mais pourrais tu m'expliquer cette partie du code ?

<script>
.on('typeahead:selected',function(obj, datum, name){
     //ta logique, la valeur sélectionnée est dans datum
     console.log(datum);
  });
</script>

typeahead:selected est un événement qui est déclenché quand une entrée de l'autosuggest est selectionnée, à toi d'y inclure ta logique.

Le json retourné par php doit ressembler à ça :

[
    {id:"1", value: "toto"},
    {id:"2", value: "michel"}
];

D'accord, et id étant l'id du fournisseur et value son nom si je suis bien ?

Oui, tout à fait (je voulais juste mettre oui mais c'est pas assez long)

Rebonjour ^^

Ma question maintenant est comment générer un json selon ton format ?

Actuellement le seul json que j'arrive à produire est de type

string '{"1":"Salle des Ventes Pollestres"}'

Je m'y prends de cette façon :

$providers = $this->providers_model->search_providers('pollestres', TRUE);

        $providers_array = array();
        foreach( $providers as $list )
        {
            $providers_array += [
                $list['p_id']    => $list['p_title'] . ' ' . $list['p_name'],
            ];
        }

        var_dump(json_encode($providers_array));

Le var_dump étant pour afficher le résultat avant essai ^^

Ca me paraît bien, mes compétences s'arrêtent là, je ne connait pas codeigniter et sa gestion du json.

Je dois avoir un soucis au niveau de l'installation alors. Car le script me retourne un "undefined" quand je remplis mon champ.

Pour résumer mon installation j'ai inclus :

<script src="{{ base_url() }}js/bloodhound.min.js"></script>
<script src="{{ base_url() }}js/typeahead.bundle.min.js"></script>
<script src="{{ base_url() }}js/typeahead.jquery.min.js"></script>

<script type="text/javascript">
    var providers = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: '{{ site_url('ajax/providers') }}'
    });

    providers.initialize();

    $('.input-group .form-control')
            .typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'providers',
                displayKey: 'value',
                source: providers.ttAdapter()
            })
            .on('typeahead:selected',function(obj, datum, name){
                console.log(datum);
            });
</script>

Dans ma page, voici mon formulaire :

<div class="input-group">
       <span class="input-group-addon"><span class="fa fa-truck" aria-hidden="true"></span></span>
                     {{ form.input('provider', provider_value, 'text', 'form-control', 'Nom du fournisseur') }}
                    </div>

qui retourne

<input type="text" name="provider" class="form-control" value="" id="provider" placeholder="Nom du fournisseur" autocomplete="off">

Aurais-je oublé un ou des fichiers ? Merci encore pour ton aide :)

Rien à faire je n'arrive pas à avancer avec :/
De plus mon formulaire refuse de s'exécuter avec le code JS :/

Bonjour, qu'indique le code js, peut-on tester le code en ligne?