Completar automaticamente a selecção de UI do Jquery

Question

Completar automaticamente a selecção de UI do Jquery

Preciso de ajuda com o código abaixo.

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val.name);
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value);
    }
});

Usando FireBug, estou a pôr isto na minha Consola.

JQuery171003666625335785867_1337116004522 ([{"nome":"97300 Cayenne","zzz": "203"}, {"nome": "97311 Roura","zzz": "201"}, {"nome": "97312 Saint Elie", "zzz": "388"}, {"name": "97320 Saint Laurent du Maroni","zzz": "391"}, {"nome": "97351 Matoury","zzz":"52"},{"nome":"97354 Remire MontJoly Cayenne","zzz": "69"}, {"name": "97355 Macouria Tonato", "zzz":"449"}])

está tudo a funcionar muito bem, mas não sei como obter o valor de 'zzz' no item select.

eu tentei

alert(ui.item.zzz);

Mas não funciona.

4

jquery-ui jquery-ui-autocomplete

Author: vyegorov, 2012-05-16

Source

3 answers

score 6 · Answer 1

O elemento auto-completo espera uma fonte de dados em formato de lista com:

objectos que contêm um rótulo propriedade, um valor propriedade, ou ambos
valores de texto simples

Você está actualmente a construir o segundo (um conjunto de valores de cadeia de caracteres), que funciona bem, mas também pode ajustar ligeiramente os seus dados à medida que interage sobre ele e também fornecer as outras propriedades do objecto:

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push({
                    label: val.name,
                    zzz: val.zzz
                });
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.zzz);
    }
});

Agora, já que a matriz que estás a fornecer o elemento contém objectos com um nome , deverá obter a funcionalidade de completação automática e também obter acesso à propriedade zzz.

Aqui está um exemplo de trabalho (sem a chamada AJAX): http://jsfiddle.net/LY42X/

score 1 · Answer 2

A sua função de origem só está a popularizar o nome. Se você quer tudo a partir dessa estrutura de dados, faça isso:

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val); //not val.name
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value.zzz);
    }
});

score 0 · Answer 3

Este parece ser um conjunto de objectos... o que pode estar faltando é o "[0]" ou em geral "[índice]".

Por Favor, verifique isto: jqueryui.com/demos/autocomplete/#event-select