级联中的自动完成-错误[object Object]或未选择单词

时间:2019-02-15 16:14:41

标签: javascript jquery ajax jquery-ui

我有一个自动完成输入框,现在我想获取所选的自动完成条目并通过GET请求发送。

当我选择自动完成选项之一时,我的代码只会得到我键入的文本,而不是我选择的文本。例如:我在输入框中键入“ TE”,并且自动完成下拉列表包含“ TEST”和“ TESTS”。然后,当我从该列表中选择“ TEST”时,我只能设法获得我键入的“ TE”值,而不是我选择的“ TEST”。

如果我这样做:

var ultimo = $('#pais').val();

它不返回所选单词,而是我输入的内容。我从中创建的URL变为:

xajax.php?variavel=distritos&q=TE

我也尝试过:

var ultimo = $('#pais').val(ui.item.value); 

但是它返回“ [object Object]”而不是所选值,所以我进入了URL:

xajax.php?variavel=distritos&q=[object Object]

我需要获取以下网址:

xajax.php?variavel=distritos&q=TEST

这是我的代码(也:{{3}}):

$(function () {
    var paises = [
"Afeganistão","África do Sul","Albânia","Alemanha","Andorra","Angola","Anguilla","Antártida","Antígua e Barbuda","Antilhas Holandesas","Arábia Saudita","Argélia","Argentina","Armênia","Aruba","Austrália","Áustria","Azerbaijão","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Bélgica","Belize","Benin","Bermudas","Bolívia","Bósnia-Herzegovina","Botsuana","Brasil","Brunei","Bulgária","Burquina Faso","Burundi","Butão","Cabo Verde","Camboja","Canadá","Casaquistão","Catar","Chade","Chile","China","Chipre","Cingapura","Colômbia","Comores","Congo","Congo-Kinshasa","Coreia do Norte","Coreia do Sul","Costa do Marfim","Costa Rica","Croácia","Cuba","Dinamarca","Djibuti","Dominica","Egito","El Salvador","Emirados Árabes Unidos","Equador","Eritreia","Eslováquia","Eslovênia","Espanha","Estados Unidos","Estônia","Etiópia","Fiji","Filipinas","Finlândia","França","Gabão","Gâmbia","Gana","Geórgia","Geórgia do Sul e Ilhas Sandwich do Sul","Gibraltar","Granada","Grécia","Groênlandia","Guadalupe","Guam","Guatemala","Guernsey","Guiana","Guiana Francesa","Guiné","Guiné Bissau","Guiné Equatorial","Haiti","Holanda","Honduras","Hong Kong, Região Admin. Especial da China","Hungria","Iêmen","Ilha Bouvet","Ilha de Man","Ilha Heard e Ilhas McDonald","Ilha Norfolk","Ilhas Aland","Ilhas Caiman","Ilhas Coco","Ilhas Cook","Ilhas Faroe","Ilhas Malvinas","Ilhas Marianas do Norte","Ilhas Marshall","Ilhas Menores Distantes dos Estados Unidos","Ilhas Natal","Ilhas Salomão","Ilhas Turks e Caicos","Ilhas Virgens Britânicas","Ilhas Virgens dos EUA","Índia","Indonésia","Irã","Iraque","Irlanda","Islândia","Israel","Itália","Jamaica","Japão","Jersey","Jordânia","Kuwait","Lesoto","Letônia","Líbano","Libéria","Líbia","Liechtenstein","Lituânia","Luxemburgo","Macau, Região Admin. Especial da China","Macedônia","Madagascar","Malásia","Malawi","Maldivas","Mali","Malta","Marrocos","Martinica","Maurício","Mauritânia","Mayotte","México","Mianmar","Micronésia","Moçambique","Moldávia","Mônaco","Mongólia","Montenegro","Montserrat","Namíbia","Nauru","Nepal","Nicarágua","Níger","Nigéria","Niue","Noruega","Nova Caledônia","Nova Zelândia","Omã","Palau","Panamá","Papua-Nova Guiné","Paquistão","Paraguai","Peru","Pitcairn","Polinésia Francesa","Polônia","Porto Rico","Portugal","Quênia","Quirguistão","Quiribati","Região desconhecida ou inválida","Reino Unido","República Centro-Africana","República Dominicana","República dos Camarões","República Popular Democrática do Laos","República Tcheca","Reunião","Romênia","Ruanda","Rússia","Saara Ocidental","Saint Pierre e Miquelon","Samoa","Samoa Americana","San Marino","Santa Helena","Santa Lúcia","São Bartolomeu","São Cristovão e Nevis","São Martinho","São Tomé e Príncipe","São Vicente e Granadinas","Senegal","Serra Leoa","Sérvia","Sérvia e Montenegro","Seychelles","Síria","Somália","Sri Lanka","Suazilândia","Sudão","Suécia","Suíça","Suriname","Svalbard e Jan Mayen","Tadjiquistão","Tailândia","Taiwan","Tanzânia","Território Britânico do Oceano Índico","Território da Palestina","Territórios Franceses do Sul","Timor Leste","Togo","Tokelau","Tonga","Trinidad e Tobago","Tunísia","Turcomenistão","Turquia","Tuvalu","Ucrânia","Uganda","Uruguai","Uzbequistão","Vanuatu","Vaticano","Venezuela","Vietnã","Wallis e Futuna","Zâmbia","Zimbábue",

    ];
    $("#pais").autocomplete({
        source: paises
    });

    $(document).ready(function () {
        $('#pais').on('autocompleteselect', function (e, ui) {
            var ultimo = $('#pais').val(toString(ui.item.value));
            var distritos = 'xajax.php?variavel=distritos&q='+ultimo;
            $("#distritos").autocomplete({
                source: distritos
            });
        });
    });
    console.log(pais);
});

HTML:

<div class="ui-widget">
    <input id="pais" />
</div>

<div class="ui-widget">
    <input id="distritos" />
    <div id="tagsdistrito"></div>
</div>

如何获取所选值并将其传递到URL?

1 个答案:

答案 0 :(得分:0)

有两种获取所选值的方法:

使用回调函数,但不要看.val()。而是从ui对象获取值:

$('#pais').on('autocompleteselect', function (e, ui) {
    var ultimo = ui.item.value;
    // ...etc

或者,只听autocompletechange事件而不是听autocompleteselect。您的autocompleteselect事件会在值更改之前 触发,但autocompletechange会在其值之后触发:

$('#pais').on('autocompletechange', function () {
    var ultimo = $(this).val();
    // ... etc

另一句话,与您的问题无关

$(function() { .... })$(document).ready(function() {.... })的缩写,因此,当您已经在第一个的回调函数中时,就无需再次调用ready