Javascript:jQuery 帮助从附加到新函数中获取 <div> 文本以进行自动完成(使用 OLEDB 作为源)

Question

我还在学习 JS 和 jQuery，所以不要太讨厌我的编码! :P

无论如何，这就是我正在尝试做的事情:

• 我有一个数据库，其中包含一个国家/地区的所有城市和邮政编码。
• 一些邮政编码有多个城市。
• 我首先对输入的邮政编码进行自动完成，在绝对定位的 div 中显示该邮政编码对应的城市。 div 由 jQuery 附加创建，以显示该邮政编码的所有城市。这一切都很好。
• 一旦我有了显示城市的 div，当我点击城市名称时，它需要将该城市的名称移动到 ShipCity 输入框，然后一个单独的函数清除 div 并将其隐藏。

但这就是我遇到问题的地方。 因为我使用 jQuery append 来制作 div，所以创建的所有 div 都具有相同的 id。我可以让城市输入框显示城市名称，但它只会从附加项中获取第一个，而不是我实际点击的那个。

我已经为此工作了 3 天，我感到很沮丧，因为我已经很接近了，但我无法完成它。 :o

我希望这是有道理的。任何帮助表示赞赏。 这是代码:

另外，这是从 .hta 运行的，php 不是一个选项。必须严格是 css/html/js。

-CSS

#container {
    padding:2;
    color:black;
    border-spacing:0px;
    margin:1px;
    width:400px;
    height:400px;
    white-space:nowrap;
    float:left;
}

#container label {
    width:100px;
    padding:0;
    color:black;
    float:left;
    font-weight:bold;
    margin-right:5px;
    display:table-cell;
}
#container input {
    width:170px;
    padding:0;
    color:black;
    margin-left:5px;
    text-transform:uppercase;
    }
    #hiddenDiv { 
    display:none; 
    position:absolute; 
    border:1px solid;
    top:418px; 
    left:580px;
    width:250px;
    background-color:#FFCC00;
}

-JS

window.onload = function() {

// autocomplete : this is executed every time we change the text.
$( "#ShipZip" ).keyup(function() {
    var min_length = 3; // min caracters to display the autocomplete
    var keyword = $('#ShipZip').val();
    if (keyword.length >= min_length) {
        // do something as we type
        var recCountry = document.em.ShipCtry.value;
        var recZip = document.em.ShipZip.value;
        c = new ActiveXObject("ADODB.Connection");
        var strConn = "provider=sqloledb;data source=server\\name;database=name;uid=username;pwd=password";
        c.Open(strConn);

        var r = new ActiveXObject("ADODB.Recordset");
        var r2 = new ActiveXObject("ADODB.Recordset");
        var strQuery = "SELECT city_name, country_division_code FROM city_postarea WHERE '"+recZip+"' BETWEEN postcode_from AND postcode_to AND country_code='"+recCountry+"' ORDER BY city_name";
        var strCntQuery = "SELECT COUNT(city_name) as cnt FROM city_postarea WHERE '"+recZip+"' BETWEEN postcode_from AND postcode_to AND country_code='"+recCountry+"'";
        r.Open(strQuery, c);
        r2.Open(strCntQuery, c);
        if(r2.fields("cnt")>1) {
            while (!r.EOF) {
                var cityname=r.fields('city_name').value;
                $("#hiddenDiv").append('<div class="popUp" id="zippy" name="'+recZip+'">'+recZip+', '+cityname+'</div>');
                $("#hiddenDiv").css("display", "block");
                r.movenext();
            }

        }
        close.strConn;      
    } else {
        // hide city list
        $('#hiddenDiv').empty();
        $('#hiddenDiv').hide();
    }
})
// this function will be executed when we select an item
$('#hiddenDiv').click(function() {
    // change input value
    dog=$("#zippy").html();
    dog=dog.split(", ").pop();
    $('#ShipCity').val(dog);
    // hide the popup
    $('#hiddenDiv').empty();
    $('#hiddenDiv').hide();
}); 

-HTML

<div id='hiddenDiv'>
</div>

    <label>Zip: <span class='ast' style='color:#FF0000'>*</span></label>
        <input name='ShipZip' class='input' type='text' id='ShipZip' /><br />

    <label>City: <font color='#FF0000'>*</font></label>
        <input name='ShipCity' class='input' type='text' id='ShipCity' /><br />

Answer 1

所以我用这行漂亮、简单的一行代码修复了它...

city=$(this).attr("id");