Como criar uma funcionalidade de typeahead no JavaScript

Question

Como criar uma funcionalidade de typeahead no JavaScript

CSS TypeAhead

Estou a tentar criar uma comboBox em HTML e JavaScript.

Então eu crio um campo de entrada e então dentro do campo de entrada eu criei uma tabela. No clique de entrada estou recebendo uma gota para baixo onde minha mesa está sendo exibida. Posso escolher o valor td da mesa.

Aqui está o meu código 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";
                }
            }
        }
    }
}

Agora quero uma característica tipográfica. Significa que se eu digitar qualquer outro valor td pode filtrar e mostrar apenas esses valores. Como posso fazer aquilo?

o meu código 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>

Há alguma maneira de eu conseguir isto?

Os meus dados 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"
    }
]

1

html css javascript jquery

Author: Peter Mortensen, 2017-06-08

Source

1 answers

score 1 · Answer 1

Tentacompletar automaticamente a UI do jQuery ...

  $( 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
    });
  } );