0
InputFilterを作成します。ここに私のコードです。入力タグでリスト項目を選択する方法
MyFilter = function(args) {
var dataUrl = args.url;
var divID = args.divID;
var div = document.getElementById(divID);
//var input = '<input type="text" id="myInput" onclick="myFunction()" title="Type in a name">';
var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">' +
'<ul id="myUL">' + '<li>' + '<a href="#"></a>' + '</li>' + '</ul>';
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();
}
foo(function(data) {
debugger;
var jsonc = JSON.parse(data);
var new_opt = "";
for (i = 0; i < jsonc.length; i++) {
new_opt += '<li><a href="#">' + jsonc[i]['VALUE'] + '</a></li>';
}
document.getElementById('myUL').innerHTML = new_opt;
});
myFunction = function() {
debugger;
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
}
リストアイテムをクリックすると、これらのアイテムが選択され、コンボボックスのように入力フィールドに表示されます。
どうすればいいですか？
ここは私のフィドラーです。 JS FIDDLE
注：現在私のコードで私は、私が選択した入力で表示したい場合は、検索することができています。
他のプロジェクトでも起こっていますが、そこにはテーブルを使用しています。そのため
コードは、私がaタグの項目と選択項目;分離によってinputタグに表示するをクリックします
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) {
_tr.addEventListener('click', function() {
document.getElementById('myInput').value += " ; " + this.getElementsByTagName('td')[0].textContent;
});
});
です。
'Inputfield'を定義しています... – vsync
@vsyncこれは、入力を与えることができる入力タグです。 – David
タイトルは非常に不明です。 UXの面で何をしたいのかというイラストを投稿すれば、助けてくれたでしょう – vsync