Javascript 如何在我的代码中使用jquery验证和jquery自动完成

嗨，我正在使用codeigniter。我正在使用ajax和

有一个叫做城市的输入框

<input type="text" class="city" name="city" value="">

tihs是错误图像

为什么会发生这种情况。如何避免这种情况，我很累了，大约一周的时间想弄清楚到底发生了什么，但没办法。请帮忙。。。。。。。。。。。。。。。。。。。。。。。。。。 非常感谢你

更新

这是城市、州和邮政编码html。state和zipcode是city字段旁边的字段

                                <div class="input-container">
                                        <div class="catergory-title-c">
                                            <span class="verdana12gray"></span>
                                        </div>
                                        <div class="form-item">
                                            <div class="catergory-inputs-b">
                                                <div class="input-small">
                                                <input
                                                   class="city clear-input"
                                                   id="textarea_small_1"
                                                   value="<?php if(isset($city['value'])){  echo $city['value'] ; }else{echo $map['other']['CityName'];} ?>"
                                                   type="text"
                                                   name="city"
                                               />                       

                                                </div>
                                                <div class="input-small">
                                                        <input
                                                               class="state clear-input"
                                                               id="textarea_small_2"
                                                               value="<?php if(isset($state['value'])){ echo $state['value'] ; } ?>"
                                                               type="text"
                                                               name="state"
                                                           />                                                               

                                                </div>
                                                <div class="input-small">
                                                    <input type="text" id="textarea_small_3" name="zip_code"
                                                        value="<?php if(isset($zip_code['value'])){ echo $zip_code['value'] ; } ?>" />
                                                </div>

                                            </div>
                                        </div>
                                        <div class="clear-fix"></div>
                                    </div>

嗯，你有一个重复的身份证：

 id="textarea_small" 

修复了上述问题后，您将需要截获验证事件，以强制它在选择事件之后触发-使用jQueryUI自动完成，这非常简单

...
select: function(event, ui) {
    var selectedValue = ui.item.value;
    var focusedElement = $(this);
    // my pretend function checkData OR add a validation event fire here.
    checkData(focusedElement, ui.item, selectedValue);
    return false;
},
...

我不熟悉您正在使用的插件，但它应该有类似的功能。
看起来您的jquery验证程序在自动完成将所选值放入城市框之前启动了-因此在您的示例中，“a”（而不是“开普敦”）正在得到验证

您可以通过使用onRollover回调“更快”填充城市框（而不是等待用户进行选择）来解决此问题。我不知道您使用的是什么autocomplete库，但我正在查看此库，您应该能够执行以下操作：

    jq('.city').autoComplete({
        onRollover: function(event, ui){
            jq('.city').val(ui.data.value)
        }
    });

在代码中，您将自动完成挂接到
.city
类。城市字段的名称/id是什么？是否有多个城市场地？在您的屏幕截图中，“开普敦”字段旁边的两个字段是什么？我只使用一个类，只有一个city字段，接下来的两个字段是state和zip code。我将发布一些HTML请编辑代码发布，然后反映哪个输入具有正确的id，哪个示例不正确：
Mark Schultheiss->我编辑了代码，但它仍然不起作用
...
select: function(event, ui) {
    var selectedValue = ui.item.value;
    var focusedElement = $(this);
    // my pretend function checkData OR add a validation event fire here.
    checkData(focusedElement, ui.item, selectedValue);
    return false;
},
...

    jq('.city').autoComplete({
        onRollover: function(event, ui){
            jq('.city').val(ui.data.value)
        }
    });