Question

我想在输入文本字段时显示div /隐藏div但是当我开始输入时没有显示任何内容。如果有人可以检查我的代码，那将非常感谢你！

html + javascript：

<body>
    <h1>LIVE SEARCH WITH AJAX TEST</h1>
    <div class="search">
    <input type="search" name="search" id="recherche" class="search" onkeypress="showdiv()">
    </div>
    <div class="resultat" id="resultat" id="resultat" style="display: none;">
        <a href="#">Search Result #1</a>
        <br>
        <a href="#">Search Result #2</a>
        <br>
        <a href="#">Search Result #3</a>
        <br>
        <a href="#">Search Result #4</a>
        <br>
        <a href="#">Search Result #5</a>
    </div>
    <script type="text/javascript">
      function showdiv() {
        if (document.getElementById("resultat").style.visibility=="hidden") {}
          document.getElementById("resultat").style.visibility="visible";
      }
   </script>

Answer 1

您需要在按键时设置display属性，而不是visibility属性，因为您通过display: none隐藏了它：

function showdiv() {
  document.getElementById("resultat").style.display = "block";
}

<div class="search">
  <input type="search" name="search" id="recherche" class="search" onkeypress="showdiv()">
</div>
<div class="resultat" id="resultat" id="resultat" style="display: none;">
  <a href="#">Search Result #1</a>
  <br>
  <a href="#">Search Result #2</a>
  <br>
  <a href="#">Search Result #3</a>
  <br>
  <a href="#">Search Result #4</a>
  <br>
  <a href="#">Search Result #5</a>
</div>

Answer 2

只需使用此代码：

<强>使用Javascript：

function showdiv() {
    document.getElementById("resultat").style.display = "block";
};

或

<强> jQuery的：

function showdiv() {
    $('#resultat').slideDown();
};

最好更改代码并按照以下方式编写代码：

HTML：

    <h1>LIVE SEARCH WITH AJAX TEST</h1>
    <div class="search">
    <input type="search" name="search" id="recherche" class="search">
    </div>
    <div class="resultat" id="resultat" id="resultat" style="display: none;">
        <a href="#">Search Result #1</a>
        <br>
        <a href="#">Search Result #2</a>
        <br>
        <a href="#">Search Result #3</a>
        <br>
        <a href="#">Search Result #4</a>
        <br>
        <a href="#">Search Result #5</a>
    </div>

使用Javascript：

document.getElementById("recherche").addEventListener('keyup', function() {
    document.getElementById("resultat").style.display = "block";
});

您的代码中的条件无用，您必须更改display而不是visibility。

Answer 3

使用var input = document.getElementById('recherche'); var div = document.getElementById('resultat'); // When the user type, we show the results input.addEventListener('keypress', function() { div.style.display = "block"; });属性显示/隐藏div。

<h1>LIVE SEARCH WITH AJAX TEST</h1>
<div class="search">
  <input type="search" name="search" id="recherche" class="search">
</div>
<div class="resultat" id="resultat" id="resultat" style="display: none;">
  <a href="#">Search Result #1</a>
  <br>
  <a href="#">Search Result #2</a>
  <br>
  <a href="#">Search Result #3</a>
  <br>
  <a href="#">Search Result #4</a>
  <br>
  <a href="#">Search Result #5</a>
</div>

focusout

您可以捕获var input = document.getElementById('recherche'); var div = document.getElementById('resultat'); // When the user type, we show the results input.addEventListener('keypress', function() { div.style.display = "block"; }); // To hide the div when the cursor isn't in the input input.addEventListener('focusout', function() { div.style.display = "none"; });事件以隐藏div。

<h1>LIVE SEARCH WITH AJAX TEST</h1>
<div class="search">
  <input type="search" name="search" id="recherche" class="search">
</div>
<div class="resultat" id="resultat" id="resultat" style="display: none;">
  <a href="#">Search Result #1</a>
  <br>
  <a href="#">Search Result #2</a>
  <br>
  <a href="#">Search Result #3</a>
  <br>
  <a href="#">Search Result #4</a>
  <br>
  <a href="#">Search Result #5</a>
</div>

    d3.json("0267_02_combine.json", function(json) {
    var features = json.features;

    var path = d3.geoPath()
        .projection(projection.fitExtent([[0, 0], [w, h]], json));

    svg.selectAll(".room")
        .data(json)
    .enter().append("path")
        .attr("class", "room")
        .attr("d", path)
        .attr("fill","lightblue")
        .attr("id", function(d){                
            return d.properties.loc;
        });

    svg.on("click", function() {
        console.log(d3.select(this)); //I see stuff!  Yay!
        console.log(d3.select(this).attr("fill")); //returns null
        console.log(d3.select(this).attr("id")); //returns null
        console.log(d3.select(this).attr("class")); //returns null

        var coords = d3.mouse(this);
        console.log(coords); //returns SVG coordinates
        console.log(projection.invert(d3.mouse(this))); //returns lat/lon

    })

});

在文本字段中键入时显示/隐藏div Javascript

3 个答案: