Javascript：jQuery 帮助获取 <div> 文本从追加到自动完成的新功能（使用 OLEDB 作为源）

Question

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

无论如何，这就是我想要做的：

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

但这就是我要解决问题的地方运行。由于我使用 jQuery 追加来创建 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");

Javascript：jQuery 帮助获取 <div> 文本从追加到自动完成的新功能（使用 OLEDB 作为源）

Javascript: jQuery help getting <div> text from an append to new function for autocomplete (using OLEDB as souce)

javascript

jquery

css

oledb