无法更改 jquery 自动完成中的文本值

Question

我有3个元素；郊区、邮政编码、州：

<div class="field">
<input class="input-text round-border" type="text" name="suburb" id="suburb" size="40" validate="required:true" value="<?=$_POST['suburb']?>" /><br />
<label class="error" for="suburb">This field is required</label>
</div>

<label for="postCode" class="mandatory <?=$errors['postCode']?>">Postcode:</label>
<div class="field"><input class="input-text round-border" type="text" name="postCode" id="postCode" size="20" validate="required:true" value="<?=$_POST['postCode']?>" /><br />
<label class="error" for="postCode">This field is required</label> </div>

我正在使用 jquery 自动完成功能在郊区字段中成功显示选项列表：

您可以看到它用逗号分隔，所以我将这些值分开并将它们放在各自的字段中 - 即，"VIC" 转到州字段，“3088”转到邮政编码 - 这些工作正如您在下面看到的，但也正如您所看到的，我无法正确设置郊区：

所以 jquery 的 'select' 中的代码是（为了简洁起见，我不会把整个东西都放在里面）：

messages: {
            noResults: '',
            results: function() {}
        },
        select: function (event, ui) {
            $subpost = ui.item.value.split(", ");

            $("#postCode").val($subpost[2]);
            $("#state").val($subpost[1]);
            $("#suburb").val($subpost[0]);

            //alert('suburb = ' + $subpost[0]);
        }

因此所有 3 个字段的代码都相同，但出于某种原因，郊区本身不会改变。您还可以看到 //alert 函数，它自己正确显示郊区，但它不会在字段中设置 ?

Answer 1

我怀疑 select 事件在自动完成实际设置 input 的值之前运行，因此当您的事件处理程序设置该值时，它几乎立即被覆盖。

你可以做的是使用 setTimeout 超时 0 将你的代码移动到执行队列的末尾，以便 jQuery 自动完成代码的其余部分在您尝试设置值之前运行完成：

select: function (event, ui) {
    setTimeout(function() {
        $subpost = ui.item.value.split(", ");

        $("#postCode").val($subpost[2]);
        $("#state").val($subpost[1]);
        $("#suburb").val($subpost[0]);
    }, 0);
}

使用超时为 0 的 setTimeout 是一种相当常见的以这种方式对代码进行排队的方法。

无法更改 jquery 自动完成中的文本值

cant change text value in jquery autocomplete

javascript

jquery

autocomplete