Question

CSS 预输入

我正在尝试用HTML和JavaScript创建一个comboBox。

所以我创建了一个输入字段，然后在输入字段中创建了一个表。点击输入后，我得到一个下拉，我的表格显示在哪里。我可以从表中选择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"
    }
]

Answer 1

尝试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

1 个答案: