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"
}
]
最佳答案
尝试 jQuery's UI Autocomplete ...
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
关于javascript - 如何在 JavaScript 中创建提前输入功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44430070/