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

Question

我有一个自动完成输入框，现在我想获取 selected 自动完成条目并通过 GET 请求发送它。

当我 select 自动完成选项之一时，我的代码只获取我输入的文本，而不是我 select 编辑的内容。例如：我在输入框中键入"TE"，自动完成下拉列表有"TEST"和"TESTS"。然后，当我从该列表中 select "TEST" 时，我只能设法获得我键入的 "TE" 值，而不是我 select 编辑的 "TEST" 值。

如果我这样做：

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

它不是 return select 编辑的词，而是我输入的内容。我从中得到的 URL 变成了：

xajax.php?variavel=distritos&q=TE

我也试过：

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

但它 returns "[object Object]" 而不是 selected 值，所以我得到 URL:

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

我需要将 URL 设为：

xajax.php?variavel=distritos&q=TEST

这是我的代码（还有：http://apoiarmais.com/teste/paises.php）：

$(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>

如何获取 selected 值并将其传递给 URL？

Answer 1

获取选中值的方式有两种：

使用您当前拥有的回调，但不要查看 .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了

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

Autocomplete in cascading - error [object Object] or not selected word

javascript

ajax

jquery

jquery-ui