无法更改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自动填充功能成功显示郊区字段中的选项列表：

您可以通过逗号看到它的拆分，因此我将这些值拆分并将它们放在各自的字段中 - 即＆＃34; VIC＆＃34;去州立大学，＆＃34; 3088＆＃34;转到邮政编码 - 这些工作如下所示，但正如您所看到的，我无法正确设置郊区：

所以＆＃39;选择＆＃39;中的代码jquery是（为了简洁，我不会把整个事情都放进去）：

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个字段的代码都相同，但由于某种原因，郊区本身不会改变。 您还可以看到//警报功能，该功能可以正确显示郊区，但它不会在现场设置？

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);
}

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