Jquery 显示浮动UL，列表左侧与上面的即时文本字段对齐

我需要CSS的帮助来显示一个值列表，可能是一个无序的列表，上面有即时文本字段

这段代码由HTML、javascript/jquery和JSON数据组成

<table>
    <tr>
        <td>
            <input type="text" size="30" onKeyUp="javascript:displayList();" />
            <td>
    </tr>
    <tr>
        <td>
            <input type="text" size="30" onKeyUp="javascript:displayList();" />
            <td>
    </tr>
    <tr>
        <td>
            <input type="text" size="30" onKeyUp="javascript:displayList();" />
            <td>
    </tr>
</table>
<div>
    <ul id="localityList"></ul>
</div>




var dataObj = {
    "response": {
        "status": {
            "severity": "NORMAL",
            "text": ""
        },
        "target_value": ""
    },
    "locality": [{
        "locId": "31110",
        "name": "Mont Albert",
        "alias": "ALERT",
        "event": "A",
        "state": "on"
    }, {
        "locId": "31111",
        "name": "Mt Macedone",
        "alias": "MACEDON",
        "event": "A",
        "state": "off"
    }, {
        "locId": "31112",
        "name": "Mornington Pen.",
        "alias": "MORNINGTON",
        "event": "B",
        "state": "on"
    }, {
        "locId": "31113",
        "name": "Mt Pleasant",
        "alias": "PLEASANT",
        "event": "C",
        "state": "on"
    }, {
        "locId": "31114",
        "name": "Kanga I",
        "alias": "KANGAROO",
        "event": "I",
        "state": "on"
    }, ]
};


function distribute(pThis) {
    //console.log($(pThis).find('td.liLocId').text());
}

function displayList() {
    locality = dataObj.locality;
    $("#localityList").empty('li');
    var li = "";
    $.each(locality, function (i, o) {
        li += '<li class="clsLocList" onClick="javascript:distribute(this);"><table><tr><td class="liLocId">' + locality[i].locId + '</td><td class="liLocName">' + locality[i].name + ' (' + locality[i].alias + ')</td></tr></table></li>';
    });

    $("#localityList").append(li);
}

var dataObj={
“答复”：{
“地位”：{
“严重性”：“正常”，
“文本”：”
},
“目标值”：”
},
“地点”：[{
“locId”：“31110”，
“姓名”：“阿尔伯特山”，
“别名”：“警报”，
“事件”：“A”，
“状态”：“打开”
}, {
“locId”：“31111”，
“名称”：“马塞多内山”，
“别名”：“马其顿”，
“事件”：“A”，
“状态”：“关闭”
}, {
“locId”：“31112”，
“姓名”：“Mornington Pen.”，
“别名”：“MORNINGTON”，
“事件”：“B”，
“状态”：“打开”
}, {
“locId”：“31113”，
“名称”：“普莱森特山”，
“别名”：“令人愉快”，
“事件”：“C”，
“状态”：“打开”
}, {
“locId”：“31114”，
“名称”：“Kanga I”，
“别名”：“袋鼠”，
“事件”：“我”，
“状态”：“打开”
}, ]
};
功能分配（pThis）{
//log（$（pThis.find（'td.liLocId'）.text（））；
}
函数displayList（）{
locality=dataObj.locality；
$（“#localityList”）.empty（'li'）；
var li=“”；
$.each（位置、功能（i、o）{
li+='
'+locality[i].locId+'+locality[i].name+'（'+locality[i].alias+'）
'；
});
$（“#localityList”）。追加（li）；
}

以下是我的JSFIDLE：

---

感谢您的建议，您必须覆盖浏览器特定的样式… 简单应用

*{
margin:0;
padding:0;
}

旁注：

• 您可能需要关闭标记
• 您可以简单地使用一些
  来创建相同的布局，而不是在
  中添加整个表，这样一来，表的呈现速度会慢一些

---

对于浮动ul（包装在DIV中），确定文本字段的位置，然后将此位置用作导出DIV相对于文本字段显示的新位置的基础。在本例中，它与左侧对齐

要计算元素的位置，请使用。这里有一个骇客：

var item = $(pItem);
console.log("displayDiv.pItem.id:" + pItem.id);
var pos = item.offset();
pos.bottom = pos.top + item.height();
pos.right = pos.left + item.width();

var top = pos.bottom + 10;
var left = pos.left;

$("#ulDiv").css({
    position: 'absolute',
    zIndex: 2000,
    left: left,
    top: top
});
$('#ulDiv').show();

更新的JSFIDLE:

---

干杯，谢谢你的帮助。我没有解释清楚。我需要像一个浮动的div这样的东西，这样无论文本框在哪里，当它显示时，它都会与上面的即时文本框左对齐。我正在努力实现类似于谷歌搜索自动完成的结果。