【发布时间】：2018-08-19 14:32:44
【问题描述】：
CSS 提前输入
我正在尝试用 HTML 和 JavaScript 创建一个组合框。
所以我创建了一个输入字段，然后在输入字段中创建了一个表格。单击输入时，我会得到一个下拉列表，其中显示了我的表格。我可以从表中选择 td 值。
这是我的 JavaScript 代码：
Myocombo = function(args) {
var dataUrl = args.url;
var divID = args.divID;
var div = document.getElementById(divID);
var myTable = '<input type="text" style="width:30%;" id="myInput" onkeyup="myFunction()" title="Type in a name">' +
'<table id="myTable">' + '<tr class="header"></tr>' + '<tr><td></td></tr>' + '</table>';
div.innerHTML = myTable;
function foo(callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', "data.json", true);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
callback(httpRequest.responseText);
}
};
httpRequest.send();
}
// Getting data from URL
foo(function(data) {
debugger;
var jsonc = JSON.parse(data);
var new_opt = "";
for (i = 0; i < jsonc.length; i++) {
new_opt += '<tr><td>' + jsonc[i]['VALUE'] + '</td></tr>';
}
document.getElementById('myTable').innerHTML = new_opt;
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) {
_tr.addEventListener('click', function() {
document.getElementById('myInput').value += " ; " + this.getElementsByTagName('td')[0].textContent;
});
});
});
// Displaying the table name
myFunction = function() {
var input, filter, table, tr, td, i;
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
现在我想要一个预先输入功能。这意味着如果我输入任何其他 td 值可以过滤并仅显示这些值。我该怎么做？
我的 HTML 代码：
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>PC-AutoCombo </title>
<link rel="stylesheet" type="text/css" href="css/Myocombo .css">
<script src="js/Myocombo.js"></script>
</head>
<body>
<select id="mySelect" onchange="myFunction()">
<option value="Line">Line</option>
<option value="Bar">Bar</option>
</select>
<div id="chart_line" style = "position: relative;"></div>
</body>
<script>
function myFunction(){
var val = document.getElementById("mySelect").value;
switch(val){
case 'Line' :
var myCombo = new Myocombo ({
"url": "data.json",
"divID": "chart_line",
});
break;
case 'Bar' :
var myCombo = new Myocombo ({
"url": "data.json",
"divID": "chart_line",
});
break;
}
}
</script>
有什么 jQuery 方法可以让我得到这个吗？
我的 JSON 数据：
[
{
"ID" : 0,
"VALUE" : "United State"
},{
"ID" : 1,
"VALUE" : "United Kingdom"
},{
"ID" : 2,
"VALUE" : "Afghanistan"
},{
"ID" : 3,
"VALUE" : "Aland Islands"
},{
"ID" : 4,
"VALUE" : "Albania"
},{
"ID" : 5,
"VALUE" : "United State"
},{
"ID" : 6,
"VALUE" : "United Kingdom"
},{
"ID" : 7,
"VALUE" : "Afghanistan"
},{
"ID" : 8,
"VALUE" : "Aland Islands"
},{
"ID" : 9,
"VALUE" : "Albania"
},{
"Data" : "Hello"
}
]
【问题讨论】：
-
我认为，最简单的方法是使用第三方库，例如：twitter.github.io/typeahead.js
-
@ThomasJamesTiam-Lee 这又是一组新的工作，我想用 javascript 完成它
-
您可以使用 JQuery 自动完成小部件。这是简短的动态自动完成答案stackoverflow.com/questions/44390442/…。希望这会对你有所帮助。
-
你能发布你的html代码吗？还是在您的问题中包含一个 sn-p？
-
你能分享 Myocombo.js 的链接吗？创建一个小提琴并解决它很有帮助。
标签： javascript jquery html css