web-dev-qa-db-fra.com

jQuery UI autocomplete avec des objets

J'utilise jQuery 1.11.2 et j'essaie de faire en sorte que le widget autocomplete analyse un tableau de données. J'ai des gens dans le tableau, Will Smith et Willem Dafoe. Je m'attendais à ce que les deux noms soient ajoutés à la liste déroulante lorsque j'inscris Wi dans le champ de texte, mais je ne reçois aucune réponse. Voici une copie du code:

<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>

<script type="text/javascript">
$(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];
    // Below is the name of the textfield that will be autocomplete    
    $('#search').autocomplete({
        // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
        // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
        source:data,
        // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the     suggestions which is the person.given_name.
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        // Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            // place the person.given_name value into the textfield called 'select_Origin'...
            $('#search').val(ui.item.first_name);
            // and place the person.id into the hidden textfield called 'link_Origin_id'. 
            $('#link_Origin_id').val(ui.item.id);
                return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
        // For now which just want to show the person.given_name in the list.                             
    };
});
</script>


Search: <input type="text" id="search" />

Le code est tout dans un seul dossier HTML sur le lecteur local. Aucun serveur n'est impliqué à ce stade. De plus, j'ai vérifié les erreurs dans l'outil d'inspection d'éléments, mais aucune d'entre elles n'est affichée et toutes les ressources sont trouvées et chargées.

javascriptjqueryjquery-uijquery-ui-autocomplete
8
Darc Nawg

Le problème était Complétion automatique impossible de restituer la source pour son fonctionnement.

Vous devez définir la source de la saisie semi-automatique en fonction des données JSON présentes à l'aide de, 

source: function (request, response) {
           //data :: JSON list defined
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));

    },

Et, j'ai également supprimé le rappel .data du code.

Voir le code de travail ici

25
Runcorn

J'ai réussi à le faire fonctionner à merveille de la manière suivante:

$(document).on('ready',function(){
  $(function() {
    var arrLinks = [
    {% for u in users %}
      {
        nombres: "{{ u.names }} {{u.sur_names}}",
        email: "{{ u.username }}",
        documento: {{ u.identificationNumber }},
        telefono: {{ u.phone }},
        label: '{{ u.names }} {{u.sur_names}} / {{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}'
      },
    {% endfor %}
    ];
    $("input[name=search]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
    };
  });

});

Remarque: je travaille avec symfony. À partir du contrôleur, j'envoie un objet avec les utilisateurs et, dans la vue (twig), je crée un FOR avec lequel j'affecte les données dont j'ai besoin. Il est important de définir dans l’étiquette tous les paramètres que vous souhaitez rechercher.

Image de démonstration!

$(document).on('ready',function(){
      $(function() {
        var arrLinks = [
          {
            nombres: "Fernando León",
            email: "[email protected]",
            documento: 10695846754,
            telefono: 3208123307,
            label: 'Fernando León / [email protected] * Doc: 10695846754 - Cel: 3208123307'
          },
          {
            nombres: "Edgar Molina",
            email: "[email protected]",
            documento: 736282826,
            telefono: 30087654637,
            label: 'Edgar Molina / [email protected] * Doc: 736282826 - Cel: 30087654637'
          }
        ];
        $("input[name=search]").autocomplete({
            source: arrLinks
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
        };
      });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="search">

1
Fernando León